I'm building a simple Facebook tab. I have two tabs that change every 3 seconds with with the help of setInterval and JQuery until the user interacts with them. Which them cancels the switching.
$(document).ready(function() {
$('#item2').hide();
$('li#tab1').addClass('selected');
var timer = setInterval(function () {
$('div.item').fadeToggle('fast')
$('li.tab').toggleClass('selected') ;
}, 3000);
$(window).blur(function(){
clearInterval(timer)
})
// setup. Set the first tab to selected
$('li.tab').click(function(event) {
clearInterval(timer);
$('li.tab').toggleClass('selected')
$('div.item').fadeToggle('fast')
});
});
This works fine... mostly. The problem occurs when I lose focus on the page for a while ( 2-3 minutes ) and switch back, the tabs switch back and forth very fast for a while before returning to normal. I am able to fix this issue if NOT in an iframe with:
$(window).blur(function(){
clearInterval(timer)
})
which just stops the switch altogether. But this does not work when the page is inside a iframe on Facebook. Can anyone suggest a solution?
Try using setTimeout instead of setInterval.
function doStuff(){
//do some stuff
setTimeout(doStuff, timeout);
}
setTimeout(doStuff, timeout);
This way, you only have one iteration going in the background, so it'll flash once immediately when the user switches back to the page (hopefully fast enough that he doesn't notice).
Related
I have 2 pages, Home page and Edit page.
I used a function which will auto log out the user after a certain amount of time of inactivity.
The function is only used in Home page and not Edit page.
Below is the function code.
// Set timeout variables.
var timoutWarning = 10000;
var timoutNow = 30000;
var warningTimer;
var timeoutTimer;
// Start timers.
function StartTimers() {
console.log("Start TImer");
warningTimer = setTimeout("IdleWarning()", timoutWarning);
timeoutTimer = setTimeout("SignOut()", timoutNow);
$( "#timeout" ).dialog({
autoOpen: false
});
}
// Reset timers.
function ResetTimers() {
clearTimeout(warningTimer);
clearTimeout(timeoutTimer);
StartTimers();
$( "#timeout" ).dialog("close")
console.log("Reset TImer");
}
// Show idle timeout warning dialog.
function IdleWarning() {
$("#timeout").dialog({
autoOpen: true,
modal: true
});
}
I called out the function in the Home page by using
<body onload="StartTimers();" onmousemove="ResetTimers();">
<div id="timeout">
<h1>
Session About To Timeout</h1>
<p>
You will be automatically logged out in a while<br />
To remain logged in move your mouse
</div>
The timer works perfectly fine in the Home page, but after I switch to Edit page ( without the function basically an empty page), I will still get auto log out with or without moving the mouse.
Does that means that the function is still running even after I switch page? If so, is there anything I can do to stop the timer after I switched the page?
p.s I did tried adding in the function and call it in the Edit page, however, even after I kept on moving my mouse I will still get logged out which is why I assume that the function is still running after I switch page.
SOLVED : its working fine right now after I restart my browser. I believe I might have screwed up somewhere. I apologize to people who invested their time into this question. The answer to my question based on the comments/answers below is NO. setTimeout DOES NOT continues after changing page.
If the browser has fully loaded the second page, and that code isn't on it, that code won't run. That's assuming you're loading the second page 'traditionally' and not pulling it in via AJAX.
I would do the following things:
Put an alert("Code running") in the setTimeout function. That's a very simple way of telling you if the code is running or not.
Check the source code for your edit page. Make sure you haven't duplicated the code to that page too.
No, timeouts get deleted when you close/refresh the page (just like anything in JavaScript). So your bug must be something else.
I have a iframe that I would like to refresh every 5 seconds, but only if the window or tab is active.
I was doing this with META Refresh, but I cant figure out a way to make this conditional to the page being active, so I have tried javascript, but without success. This is what I have tried, but it is not working:
<SCRIPT>
$(window).focus(function(){
setTimeout(function(){
window.location.reload(1);
}, 5000);
});
<SCRIPT>
Am I headed in the right direction, or is there a cleaner way to do this?
You may use the page visibility API and check every 5 seconds the visibility state of your page: if it's not hidden then refresh the page
$(function() {
window.setInterval(function() {
if (!document.hidden) {
window.location.reload(1);
}
}, 5000)
});
where hidden here means
the page content is not visible to the user. In practice this means
that the document is either a background tab or part of a minimized
window, or the OS screen lock is active.
Hey guys I have a javascript function that keeps persisting even when navigating to another page (single page templates not multipage) in Jquery Mobile
<script type="text/javascript">
setInterval("window.location.reload();", 5000);
</script>
How do I ensure that this only occurs on the page from which it is called rather than it calling it on every page I link to with ajax based navigation?
I am using Jquery Mobile 1.2
Bind it to the page where you want it to occur. Replace $('.selector') with pageID, e.g. $('#home'). You could also be more specific $('div[data-role="page"]#PageID').
// Trigger interval
$('.selector').bind('pageinit', function () {
setInterval("window.location.reload();", 5000);
});
// Stop interval when navigating away
$('.selector').bind('pagehide', function () {
clearInterval();
});
How do I ensure that this only occurs on the page from which it is
called rather than it calling it on every page I link to with ajax
based navigation?
Don't call it? Currently your code is set up to always run when it's included on the page. Either don't include it or prevent it from running in some other way (such as an if-statement).
You could clear the interval just before you navigate.
First you need to get a reference to the interval when you create it:
var intervalRef = setInterval("window.location.reload();", 5000);
Then you can clear it like this:
clearInterval(intervalRef);
// Navigate
Just cancel your timeout when the other page loads, or when the current page exits (the other page loads in ajax so the timed interval stays up).
// trigger
myInterval = setInterval("window.location.reload();", 5000);
// stop
clearInterval(myInterval);
I have a function that sets display=none on a table row. At the end of my function I want to set a timeout to hide the next table row after a few milliseconds.
I have a problem though. When the timeout expires, the page is reloaded (undoing the effects of my function and and scrolling to page top). This even happens if I use an empty timeout: window.SetTimeout(function () { ; }, 1000); How can I stop this happening?
I am using recent Chromium.
I think your problem is somewhere else, disregarding the obvious error that you cased SetTimeout wrong ( it should be setTimeout ).
There is nothing in your code that should refresh the page.
Edit:
Just thought of something, since you cased SetTimeout wrong, maybe your click handler doesn't finish as it should, thus letting the link "pass through" and load the page.
Edit2:
Huh, thats not the case....
http://jsfiddle.net/eGhQM/6/
Edit3:
...and maybe it is(x-something error on fiddle though)
http://jsfiddle.net/eGhQM/9/
I'm not sure I 100% understand the question, but you can use clearTimeout if you store the timeout you set. That is to say:
var timeout = setTimeout(function(){
alert('Hello, world!');
}, 1000);
...
clearTimeout(timeout); // destroys the timeout, preventing it from occurring
// (assuming you call this before the time expires)
I am having a Javascript function which displays timer.
Now,when timer reaches 2 minutes, I want to display a alert and continue my timer function.
But,my timer function stops till user clicks 'Ok' and then resumes from 1:59 secs.
Can anyone tell me how to keep the timer function running while popup box is displayed?
Here's my function to display timer.
var minutes=5;
var seconds=59;
function time_display(){
if(minutes==2 && seconds==0){
setTimeout('display_time_alert_two_minutes_left()',100);
}
if (seconds<=0){
seconds=59;
if(minutes>0)
minutes-=1;
}
else
seconds-=1;
$('time_left_in_minutes').innerHTML = minutes+"."+ ljust_zero(seconds);
setTimeout("time_display()",1000);
}
time_display();
and this is my alert function.
function display_time_alert_two_minutes_left(){
alert('Two minutes left');
}
Alert is a blocker, use custom javascript popups like lightbox,lytebox,jquery dialog,fancybox etc.
Or you can simply show/hide a floating div. This will solve the problem of your timer
getting stuck, and also enhance your user experience.
How about you use something thats no so intrusive, something like this
As alert() stops the rest of the javascript code executing, it would be better to use something that doesn't require an imperitive style of incrementing time.
How about you actually use the time/date functionality, which will 'keep counting'?
Edit : This will stop the web page updating when you call alert() but it will keep counting fine whilst an alert is open.