clearInterval not working correctly - javascript

I'm using javascript setInterval function to make some queries to a server but when the unload method is trigged the GETs are not stopping.
$(document).ready(function(){
example.init();
});
$(window).unload(function(){
clearInterval(example.INTERVAL_ID_1);
alert(example.INTERVAL_ID_1+" killed!");
});
var example= {
init: function(){
this.INTERVAL_ID_1;
...
this.INTERVAL_ID_1 = setInterval(function(){
...
}, 9000);
},
...
}
The unload method is called, the alert gives the right INTERVAL_ID but it stays alive, I can see the queries being made in the server console.

Somehow it's working... it's strange sometimes the server console is flooded with GET and POST, but now it's working... strange.
Thanks though ;)

Related

Angularjs Onbeforeunload without prompt not working properly

I want to execute some code before the window closes but i don't want to display the prompt.
Here is my code :
$window.onbeforeunload = function(){
$rootScope.$broadcast('war-change');
return undefined;
};
$scope.$on('war-change',function(){
console.log('here');
//Execute some more code here.
});
returning undefined or false is not working as my code is not getting executed.
any help is appreciated.
You code does work as intended. Check the following fiddle:
https://jsfiddle.net/8ubz4bxg/
<div ng-app>
<h2>Test unload</h2>
<div ng-controller="unloadCtrl">
</div>
</div>
And controller same as you have:
function unloadCtrl($scope,$window,$rootScope) {
$window.onbeforeunload = function(){
$rootScope.$broadcast('war-change');
return undefined;
};
$scope.$on('war-change',function(){
console.log('here');
//Execute some more code here.
});
}
But, there are limitations on what you can do with the beforeunload method, because once unload is committed, you have a very limited time to do something. To test how much time you have, you can use the following modification:
$scope.$on('war-change',function(){
console.log('here');
//Execute some more code here.
setTimeout(function(){ console.log("ha-ha")}, 100)
console.log("he-he")
});
Now, if you decrease the timeout to something like 0-100, you may still see "ha-ha" int he output. Increase it to 2 seconds (2000) and most probably you will not see that line.

How to know if the user is idle?

basically I want to run some code in jquery after the user has stopped doing anything in the browser like click,scroll. How to know if all functions have finished and jquery is not being busy (being run or used)
Basically run code only when the user is idle
If I am getting you right, this is what you were looking for
<script>
$(function(){
(function(seconds) {
var refresh,
intvrefresh = function() {
clearInterval(refresh);
refresh = setTimeout(function() {
alert('No activity from user 10 seconds, put your code here !');
}, seconds * 1000);
};
$(document).on('click keydown keyup mousemove', function() { intvrefresh() });
intvrefresh();
}(10));
});
</script>
Typically you'd wait until everything has loaded. This means that all elements have finished loading on the page (e.g. Images loaded in). There's nothing here to tell you that there's no JavaScript running in the background though.
$(window).load(function() {
// Do stuff
});
try {
var str =$('body').html();
} catch ( e ) {
alert('jquery not used');
}
Do something like this. jsfiddle
I just answered it here. See if it makes sense.
TLDR;
You can do it more elegantly with underscore and jquery-
$('body').on("click mousemove keyup", _.debounce(function(){
// your code here.
}, 1200000)) // 20 minutes debounce

How to test for my Javascript callback with Jasmine?

I need to test if specific methods are called when user scrolls the window to a certain point. In my source code I have windows listener attached, something like:
$(window).on("scroll.singleJob",function(e)
{
// code here, check if the window is scrolled past certain point etc. and then I need to call this method
LozengesPanel.makeFixed();
}
Now, in my Jasmine test I'm trying to confirm that the method is being called when the window is scrolled to a certain point. So I set up the test:
describe("SingleJob page", function() {
beforeEach(function() {
loadFixtures('my_fixture.html');
});
it("panel sticks to top when page scrolled down", function() {
spyOn(mycompany.singleJobTestable.LozengesPanel, "makeFixed");
window.scroll(0,1000);
expect(mycompany.singleJobTestable.LozengesPanel.makeFixed).toHaveBeenCalled();
});
});
But the test fails, all I get is Expected spy makeFixed to have been called.
How can I trigger window scroll so I can test methods inside of this callback?
EDIT:
Finally it all makes sense.. It seems that scroll event was put in a tasks queue only to be executed after the current thread finishes. Adding $(window).trigger("scroll"); did the trick. I posted short blog post about it that explains the issue http://spirytoos.blogspot.com.au/2014/02/testing-windowscroll-with-qunitjasmine.html
EDIT: This answer does not satisfy the question. See the comments for the reason.
Actually, it looks like you are triggering the scroll event from your Jasmine spec. I tried very similar code, which I include below. However, my expect still fails, like yours (I'm still getting familiar with Jasmine, so I can't explain with certainty why that is).
var fun = {
scrollEventCallback: function() {
console.log('scroll event triggered');
}
};
$(window).on('scroll', fun.scrollEventCallback);
describe("A test suite", function() {
it("should trigger f", function() {
spyOn(fun, "scrollEventCallback");
$(window).trigger('scroll'); // my callback function is executed because it logs to the console
expect(fun.scrollEventCallback).toHaveBeenCalled(); // this fails anyway
});
});
Maybe your window.scroll(0, 1000) is not actually pushing the viewport low enough to trigger your Lozenges.makeFixed() call. That would be the case if the page (your fixture, I think) wasn't long and it didn't actually have anywhere to scroll.
Also, I got code similar to your provided code to work. The expect(...) succeeds. It is pasted below.
var LozengesPanel = {
makeFixed: function() {
console.log('makeFixed was called with its original function definition');
}
};
$(window).on("scroll.singleJob",function(e) {
LozengesPanel.makeFixed();
});
describe("A test suite", function() {
it("should trigger callback", function() {
spyOn(LozengesPanel, "makeFixed");
$(window).trigger('scroll'); // nothing is logged to the console
expect(LozengesPanel.makeFixed).toHaveBeenCalled(); // succeeds
});
});

What is the correct way to do an infinite loop that calls a method in Jquery or Javascript?

I have a page that I want to update non stop, every few seconds.
For this, I wrote the following:
var to;
$(function () {
to = setTimeout(updateDivContent, 2000);
});
function updateDivContent() {
$('#topbox').load('/home/blabla', null);
$('#leftgraph').load('/home/blabla', null, function () {
to = setTimeout(updateDivContent, 2000);
});
};
This worked, however, it leads to what I presume is a memory leak as after around 15 minutes, the computer almost freezes up with the browser taking up all available memory and CPU.
I am guessing that the Timeout is basically stacking, but, I am not sure how to fix this. I have tried getting rid of the second timeout and putting the first one inside a while(true) loop, but, I just couldn't get it to work.
Can anyone suggest anything?
This looks fine actually. But if the first Ajax call does not finish within two seconds, it will stack, and this could (don't know for sure) cause problems.
The timeout itself does not stack, since you are initiating a new one only after the previous one finished.
Try to initiate a new timeout once both Ajax requests finished:
$.when($('#topbox').load('/home/blabla'),
$('#leftgraph').load('/home/blabla')
).then(function () {
setTimeout(updateDivContent, 2000);
});
Reference: $.when
I think it is better to use setInterval instead of setTimeOut.
See this post.
You probably want to call clearTimeout to invalidate the previous timer, like this:
clearTimeout(to);
to = setTimeout(updateDivContent, 2000);
can you this it will call ever 2 second
to = setInterval("updateDivContent", 2000);
function updateDivContent() {
$('#topbox').load('/home/blabla', null);
$('#leftgraph').load('/home/blabla', null, function () {
//to = setTimeout(updateDivContent, 2000);
});
};
Try setInterval:
var to;
$(function () {
to = setInterval(updateDivContent, 2000);
});
function updateDivContent() {
$('#topbox').load('/home/blabla', null);
$('#leftgraph').load('/home/blabla')
};

setInterval stops without any reason when browser tab is background

I am working on an application that sends current timestamp to database every 2 minutes with AJAX using setInterval.
But somehow setInterval stops after some minutes (i didnt calculate the exact time), but i believe it happens when i dont open that browser's tab for 20-30 minutes.
function tmstmp() {
$.post("send_functions.php?act=time");
}
$(function() {
setInterval(tmstmp, 60000);
});
Is that normal that setInterval stops if that tab is not on foreground ?
If yes, how can i prevent setInterval to stop ? or check if it stopped ?
Thanks
You should try to make an function call on page startup:
test();
and then loop that function:
function test() {
setTimeout(function() {
// your code
test();
}, 2000);
}
That's not supposed to happen.
Browsers may indeed reduce the timer resolution to something around 1/s, but not clear the setInterval.
Could there be some bug in your code that causes a clearInterval?
No code + no debug information = hard to tell what went wrong.
Just to be sure add the following line to the code (method) that gets executed with setInterval and watch after 20-30 minutes if you still get output in the console.
console.log('Yep! I am alive!');
EDIT: Could be anything but try changing the tmstmp method to include a callback function after the POST request gets executed. That way you'll at least know that it works.
function tmstmp() {
$.post("send_functions.php?act=time", function(data){
console.log('Yep! I am alive!');
});
}

Categories