in my page , I have a real-time chart which updates every 3 seconds
I used setInterval(function(){...} , 3000) for make the chart updates.
but my problem is when I move to another page(by javascript) every thing are destroyed except my interval , so when I back to the chart page , it load every thing again and setInterval method works twice on every 3 seconds which makes duplicated points on mu chart.
this is destroy method
every line works except the myInterval one
destroy()
{ this.num=0;
this.c=0;
this.startLive = false;
clearInterval(this.myInterval); }
my problem appears just when I go to another page then back.
<template>
....
</template>
<script>
var charts = [];
export default {
data() {
return {
startLive: false,
num: 0,
c: 0,
myInterval: null,
}
},
methods: {
initChart(dataProvieded) {
charts[this.num] = AmCharts.makeChart("chart" + this.num, {...});
},
loadInitalData(limit) {
this.fetchDatafromServer(limit).then((response) => { ...
this.initChart(data);
this.num++;
this.setInt();
});
},
setInt() {
this.myInterval = setInterval(function() { .... } , 3000);
},
}
destroy() {
this.num = 0;
this.c = 0;
this.startLive = false;
clearInterval(this.myInterval);
}
</script>
It's strange, try to set debugger; before clearInterval to check variables.
By the way not all codepaths ok (looks like initializations doubled).
You should rewrite as
if (this.myInterval !== null) {
clearInterval(this.myInterval);
this.myInterval = null;
}
and add corresponding guard at setInt:
setInt() {
if (this.myInterval === null ) {
this.myInterval = setInterval(function() { .... } , 3000);
}
}
May you need one interval per graph, please check your logic.
Related
How can I change the following code to run only once per session, and once per page. The div#edgtf-manon-loading-title appears on every page. So, on the second time the same user/session goes to the same page they went before, the animation would NOT load anymore. Thanks!
function edgtfLoadingTitle() {
var loadingTitle = $('#edgtf-manon-loading-title');
if (loadingTitle.length) {
var fallback = edgtf.body.hasClass('edgtf-ms-explorer') ? true : false;
var done = function() {
edgtfEnableScroll();
edgtf.body.addClass('edgtf-loading-title-done');
$(document).trigger('edgtfTitleDone');
};
var toTop = function() {
loadingTitle
.addClass('edgtf-to-top')
.one(edgtf.transitionEnd, done);
};
edgtfDisableScroll();
loadingTitle.addClass('edgtf-load');
if(fallback) {
toTop();
}
loadingTitle.one(edgtf.animationEnd, toTop);
}
}
Is there a way I can add something like this code below to the original? And where exactly?
var yetVisited = localStorage['visited'];
if (!yetVisited) {
//something here
};
I am have some issues resetting my timer when no longer idle. I am using Vue Idle for this, which is a wrapper for idle.js.
So I have a modal with the id timeout-modal. When Vue Idle triggers the idle function, I call showWarningMessage.
Within this function, I first display my modal. I then create a timer which my modal uses to do a countdown. So this all works fine.
<script>
export default {
data() {
return {
timerId: 0,
remainingTimeoutSeconds: 10000
}
},
computed: {
second() {
return this.remainingTimeoutSeconds / 1000;
}
},
onIdle () {
this.showWarningMessage();
},
methods: {
showWarningMessage() {
this.$bvModal.show('timeout-modal');
this.warning = true;
this.timerId = setInterval(() => {
this.remainingTimeoutSeconds -= 1000;
}, 1000);
},
}
}
</script>
Now within the modal there is a continue button. When pressed, it should basically reset the above timer. At the moment I have
handleContinueButtonClick(response) {
if (response.data.success) {
console.log("IN")
this.$bvModal.hide('app-timeout-reminder-modal');
clearInterval(this.timerId);
return;
}
}
So what this should do is hide the modal, and then reset the timer back to 10 seconds. It is entering the above as the console is printing IN. The modal is also
hidden when I click OK.
However, the next time the modal is displayed, the timer is already near 0 as it did not reset back to 10.
Is there any reason why I cant get this back to 10 seconds? I thought clearInterval should reset the timer?
Thanks
I thought clearInterval should reset the timer?
Do you mean this.remainingTimeoutSeconds is set automatically when calling clearInterval?
The answer is no.
You need to reset that value as 10000 like blow;
handleContinueButtonClick(response) {
if (response.data.success) {
console.log("IN")
this.$bvModal.hide('app-timeout-reminder-modal');
this.remainingTimeoutSeconds = 10000;
clearInterval(this.timerId);
return;
}
}
or
showWarningMessage() {
this.$bvModal.show('timeout-modal');
this.warning = true;
this.remainingTimeoutSeconds = 10000;
this.timerId = setInterval(() => {
this.remainingTimeoutSeconds -= 1000;
}, 1000);
}
I am working on Notice bar which remembers when it has been closed and slides down if it has never been closed before.
However, if you do not close the Notice, and if you navigate through the pages of my website, it slides down each time. This can be irritating to the viewers.
How can I change the code so it slides down on the first view of the website, and then never again if you navigate other pages? I want it to slide down of first view, and then if you click a link it is just open. I tried making some changes to the last part, but could not figure it out.
Live view
var clearCookie = function() {
var result = $.removeCookie('JSFiddleCookieNotification');
if (result) {
alert('Cookie removed, please reload.');
} else {
alert('Error: Cookie not deleted');
}
}
var closeCookie = function() {
$("#notice").slideUp(400, function() {
$(this).remove();
});
$('#fixed').animate({
top: 0
}, 400);
$.cookie('JSFiddleCookieNotification', 'Notified', {
expires: 7
});
}
// Bind the buttons
$("#clearCookie").on("click", clearCookie);
$(".exit").on("click", closeCookie);
// Now display the cookie if we need to
if ($.cookie('JSFiddleCookieNotification') == null) {
$('#notice').slideDown(1000);
var timer = setInterval(function() {
$('navmenu, navmenu-mobile, #fixed').css({
top: $('#notice').outerHeight()
});
if ($('#notice').outerHeight() == $('#fixed').css('top')) {
clearInterval(timer);
}
}, 10);
}
Changes to not slide down:
var isUserSawNotify = $.cookie('userSawNotify') != null;
if (!isUserSawNotify) {
$.cookie('userSawNotify', 'Notified', {
expires: 7
});
}
// Now display the cookie if we need to
if ($.cookie('JSFiddleCookieNotification') == null) {
$('#notice').slideDown(isUserSawNotify ? 0 : 1000);
var timer = setInterval(function () {
$('navmenu, navmenu-mobile, #fixed').css({
top: $('#notice').outerHeight()
});
if ($('#notice').outerHeight() == $('#fixed').css('top')) {
clearInterval(timer);
}
}, 10);
}
I'm just explaining how to do the last part from my comment. (when the page is loaded, set a cookie that the user already see the notice. Next time the user will get the page, check if the cookie exist and if so, don't slideToggle)
$(document).ready(function() {
// this is the new part
var isUserSawNotify = $.cookie('userSawNotify') != null;
if (!isUserSawNotify) {
$.cookie('userSawNotify', 'Notified', {
expires: 7
});
}
if ($.cookie('JSFiddleCookieNotification') == null) {
// edit the specific line in your existing code
// if user already saw the notify, just pass 0 to the duration so it will show the notify without the transition
$('#notice').slideDown(isUserSawNotify ? 0 : 1000);
}
});
I have an input which controls the state of an element changing very rapidly. This causes that element to flicker as parts of it change.
I am trying to store these state changes and then providing nothing has changed for a set amount of time (an arbitrary 500ms) change the state.
I have tried to solve this using timeouts as demonstrated in the code below (the same code as in the fiddle.):
var changingToHappy = false;
// Original no attempts to fix functions.
//var ifHappy = function () {
// $("#face").text(':)');
//};
//
//var ifNotHappy = function () {
// $("#face").text(':(');
//};
var ifHappy = function () {
changingToHappy = true;
setTimeout(function () {
if (changingToHappy) {
$("#face").text(':)');
}
}, 500);
};
var ifNotHappy = function () {
changingToHappy = false;
setTimeout(function () {
if (!changingToHappy) {
$("#face").text(':(');
}
}, 500);
};
$("#textBox").keypress(
function (event) {
if (event.which == 49) {
ifHappy();
$("#flickerFace").text(':)');
}
if (event.which == 50) {
ifNotHappy();
$("#flickerFace").text(':(');
}
}
);
If you rapidly press 1, 2, 1, 2 and so on in the fiddle the face will remain not flickery for a moment and then the timeouts will catchup and it will begin to change state.
This fiddle http://jsfiddle.net/9w70wxgz/4/ simulates the problem.
To clarify I only want the face to change if nothing has tried to change its state for a set amount of time.
What you're looking for is called a debounced function, here is an example with a piece of your code (you're almost there):
//storage for timer
var notHappyTimer;
var ifNotHappy = function () {
changingToHappy = false;
//removes timer if event fires in less than 500ms
clearTimeout(notHappyTimer);
//resets it to attempt again in 500ms
notHappyTimer = setTimeout(function () {
if (!changingToHappy) {
$("#face").text(':(');
}
}, 500);
};
As you can see, you just assign the timeout to a variable that clears itself every time the function is fired, then starts the timer again. This ensures that the text change only happens if the function hasn't been fired in 500ms.
I have a simple throbber, that is automatically shown when an ajax request lasts longer than 3 seconds. This throbber consists mainly of an animated GIF-Image.
Now, I want to use the same throbber also for regular links, meaning that when I click a link and it takes the server more than 3 seconds to respond, the throbber is shown.
Unfortunately, it seems that firefox is unable to play the animation, while it is "reloading" the webpage. The javascript is called and fades the throbber correctly in, but is it not spinning.
How can I make firefox play the GIF-Animation while it is loading?
This is the function:
// Throbber manager
function Throbber() { }
Throbber.prototype = {
image : null,
requests : 0,
requestOpened : function(event) {
if (this.requests == 0) {
this.image.src = 'throbber.gif';
}
this.requests++;
},
requestLoaded : function(event) {
this.requests--;
if (this.requests == 0) {
this.image.src = 'throbber_stopped.gif';
}
},
clicked : function() {
request_manager.abortAll();
},
// Called on window load
attach : function() {
this.image = document.getElementById('throbber');
if (this.image && request_manager) {
request_manager.addEventListener('open', [this, this.requestOpened]);
request_manager.addEventListener('load', [this, this.requestLoaded]);
request_manager.addEventListener('abort', [this, this.requestLoaded]);
this.image.onclick = function() { Throbber.prototype.clicked.apply(throbber, arguments); };
}
}
}
var throbber = new Throbber();
window.addEventListener('load', function() { Throbber.prototype.attach.apply(throbber, arguments); }, false);
function SimpleDemo() { }
SimpleDemo.prototype = {
// The AjaxRequest object
request : null,
// Setup and send the request
run : function() {
this.request = request_manager.createAjaxRequest();
this.request.get = {
one : 1,
two : 2
};
this.request.addEventListener('load', [this, this.ran]);
this.request.open('GET', 'xml.php');
var req = requests[this.request.id];
return setTimeout(function() { req.send(); }, 5000);
},
// Triggered when the response returns
ran : function(event) {
alert(event.request.xhr.responseText);
}
}
If you use jQuery:
$("#throbber").show();
/* Your AJAX calls */
$("#throbber").hide();
Check to see when the DOM is ready before calling all your Ajax stuff.
using Prototype:
document.observe("dom:loaded", function() {
//your code
});
using jQuery:
$(document).ready(function() {
//your code
});
Or Refer this: http://plugins.jquery.com/project/throbber
I just tried my old code and found out that this issue does not exist anymore in Firefox 10.0.2