Is there anyway to implement a timer for JQuery, eg. every 10 seconds it needs to call a js function.
I tried the following
window.setTimeout(function() {
alert('test');
}, 10000);
but this only executes once and then never again.
You can use this:
window.setInterval(yourfunction, 10000);
function yourfunction() { alert('test'); }
window.setInterval(function() {
alert('test');
}, 10000);
window.setInterval
Calls a function repeatedly, with a
fixed time delay between each call to
that function.
Might want to check out jQuery Timer to manage one or multiple timers.
http://code.google.com/p/jquery-timer/
var timer = $.timer(yourfunction, 10000);
function yourfunction() { alert('test'); }
Then you can control it with:
timer.play();
timer.pause();
timer.toggle();
timer.once();
etc...
setInterval is the function you want. That repeats every x miliseconds.
window.setInterval(function() {
alert('test');
}, 10000);
jQuery 1.4 also includes a .delay( duration, [ queueName ] ) method if you only need it to trigger once and have already started using that version.
$('#foo').slideUp(300).delay(800).fadeIn(400);
http://api.jquery.com/delay/
Ooops....my mistake you were looking for an event to continue triggering. I'll leave this here, someone may find it helpful.
try jQueryTimers, they have great functionality for polling
http://plugins.jquery.com/project/timers
You can use setInterval() method also you can call your setTimeout()
from your custom function for example
function everyTenSec(){
console.log("done");
setTimeout(everyTenSec,10000);
}
everyTenSec();
function run() {
window.setTimeout(
"run()",
1000
);
}
Related
how to convert the following setInterval() to requestAnimationFrame()?
Below is a simple working setInterval model that I'm using.
$(document).ready(function() {
$("#add").click(function() {
$('#result').html(
(parseFloat($('#numA').val()) +
parseFloat($('#numB').val())).toString()
);
});
setInterval(function () {$("#add").click()}, 1000);
});
http://jsfiddle.net/nqqfq/4/
I've seen one that requires loop (game loop), but my code isn't about gaming. It's about parsing strings.
The documentation is a bit complicated. I've tried some trial-errors, but no success so far.
Thank you for any input.
You need to invoke requestAnimationFrame repeatedly, for example:
!function frame() {
$('#add').click()
requestAnimationFrame(frame)
}()
Demo: http://jsfiddle.net/nqqfq/6/
So, I want to put delay on this JavaScript code.
$(function(){
$('.clickThis').each(function(){
$(this).click();
});
});
I tried this
$(function(){
$('.clickThis').each(function(){
$(this).click().delay(5000);
});
});
above script doesnt work .
Is there any alternative?
I've tried Google it but I still couldn't figure it out, because I have little knowledge in JavaScript.
This will do it:
$(function(){
$('.clickThis').each(function(i, that){
setTimeout(function(){
$(that).click();
}, 5000*i );
});
});
Here's a version using a recursive setTimeout loop.
$(function() {
var click = $('.clickThis').toArray();
(function next() {
$(click.shift()).click(); // take (and click) the first entry
if (click.length) { // and if there's more, do it again (later)
setTimeout(next, 5000);
}
})();
});
The advantage of this pattern over setTimeout(..., 5000 * i) or a setInterval call is that only a single timer event is ever queued at once.
In general, repeated calls to setTimeout are better than a single call to setInterval for a few reasons:
setInterval calls can queue up multiple events even if the browser isn't active, which then all fire as quickly as possibly when the browser becomes active again. Calling setTimeout recursively guarantees that the minimum time interval between events is honoured.
With setInterval you have to remember the timer handle so you can clear it
You need to write an asynchronous setTimeout loop, for more information http://www.erichynds.com/javascript/a-recursive-settimeout-pattern/
Try to use this:
$(function () {
var items=$('.clickThis');
var length=items.length;
var i=0;
var clickInterval=setInterval(function(){
items.eq(i).click();
i++;
if(i==length)
clearInterval(clickInterval);
}, 5000);
});
var $clickthis=$(".clickthis");
var i= -1;
var delayed = setInterval(function(){
if (++i < $clickthis.length) $clickthis.eq(i).trigger("click");
else clearInterval(delayed);
}, 5000);
I am not sure but I think that setTimeout function should do the trick.
See here https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout
Try
$(function(){
$('.clickThis').each(function(_,i){
var me=$(this);
setTimeout(function(){me.click()},5000*i);
);
});
I have following code
$('document').ready(function() {
reload();
});
function reload() {
$('div#info').load('http://somesite.ru/script.php');
setInterval(reload(), 10000);
}
but seems like method reload() runs too fast. Firefox shows me message, about jquery.min.js is sems to busy. How can I make part of page refresh one time for each 10 seconds?
You should remove the (), also put the setInterval function outside the context of the reload function.
function reload() {
$('#info').load('http://somesite.ru/script.php');
}
$(document).ready(function() {
setInterval(reload, 10000);
});
Replace:
setInterval(reload(), 10000);
with:
setInterval(reload, 10000);
Use setTimeout() instead it is safe and performance wise good than the setInterval() to fulfill your requirement.
var time= setTimeout(reload,1000);
after checking certain conditions in the reload() method call the setTimeout inside it again
function reload()
{
/// your logic
setTimeout(reload,1000);
}
use the above variable to destroy the interval whenever you don't want to reload anymore
clearTimout(time);
Refer: http://www.w3schools.com/js/tryit.asp?filename=tryjs_setinterval
setInterval(function(){reload();},10000);
Another way is just use
$('document').ready(function() {
setInterval(function() {
$('div#info').load('http://somesite.ru/script.php');
}, 10000);
});
All works fine. Thanks a lot for your answers.
Whats wrong in here?
$(document).ready(function(){
$(window).load(function(){$("#welcome").fadeIn(2000); })
setTimeout(function(){
$('div#welcome').fadeOut(2000);
}, 4000);
setTimeout(function(){
$('div#content').fadeIn(2000);
}, 6000);
setTimeout(function(){
$('div#menu').fadeIn(2000);
}, 8000);
});
It seems like something is not running as it should, as all functions will be called parallel.
In addition people tell me that my graphic will be loaded with a delay and will 'stick'.
I appreciate any help!
So, syntax-wise, there isn't a semi-colon at the end of the window.load event setter. You should add that.
However, I just ran your JS with a mock HTML set, and it worked fine. Not sure what you are experiencing. All three of the setTimeout calls will begin to run at the same time. So... rather than taking 18 seconds to run, they will all only take 8 seconds to run. It looks like that is what you wanted.
Here is the most efficient wait to write your code though:
$(document).ready(function(){
$(window).load(function(){
$("#welcome").fadeIn(2000).delay(2000).fadeOut(2000,function(){
$('div#content').fadeIn(2000,function(){
$('div#menu').fadeIn(2000);
});
});
});
});
Here, what will happen is that each of your animations will trigger the next animation, when they are complete.
I think you are looking for something like this.
$(document).ready(function(){
$("#welcome").fadeIn(2000, function(){
setTimeout(function(){
$('div#welcome').fadeOut(2000, function(){
setTimeout(function(){
$('div#content').fadeIn(2000, function(){
setTimeout(function(){
$('div#menu').fadeIn(2000);
}, 8000);
});
}, 6000);
});
}, 4000);
});
});
If you want to do something after something is finished you need to add another function after you set your parameter (2000 in this case).
I believe that you want to do something like this http://jsfiddle.net/Cp4Dx/
OP don't forget about Jquery's delay() function which can help you avoid setTimeout().
$(window).load(function(){$("#welcome").fadeIn(2000).delay(4000).fadeOut(2000)});
You can use the jQuery queue for it:
$(document).ready(function() {
$('#welcome').fadeIn(2000).delay(2000).fadeOut(2000);
$('#content').delay(4000).fadeIn(2000);
$('#menu').delay(6000).fadeIn(2000);
});
Demo: http://jsfiddle.net/ThiefMaster/9nPAR/
I am using the following code as part of an autocomplete script to avoid hammering the server with every keystroke:
var that = this;
textInput.bind("keyup", function() {
clearTimeout(that.timer);
that.timer = setTimeout (that.doStuff(), 2000);
});
Unfortunately, this does not clear the old timers. They still all execute.
Does anyone know what I'm missing?
Thanks!
You probably want to use:
that.timer = setTimeout (that.doStuff, 2000);
instead of:
that.timer = setTimeout (that.doStuff(), 2000);
Otherwise, doStuff will be called immediately.