Search jQuery

jQuery Forum

javascript sleep(), wait(), and use of setTimeout()

in Using jQuery • 13 years ago

whats the best way to achieve a wait() behaviour with JS?

The below function prints 10 dots after 1 sec because the for loop dosn't wait for the setTimeout() function to complete.

$(document).ready(function() {
for (i=0;i<10;i++) {
setTimeout('addDot()',1000);
}
});
function addDot() {
$('#dots').append('.');
}

many thanks

Tim

Replies(8)

charlesmc..

Re: javascript sleep(), wait(), and use of setTimeout()

13 years ago

setInterval is the function you're looking for:

https://developer.mozilla.org/en/DOM/window.setInterval

kswedberg

Re: javascript sleep(), wait(), and use of setTimeout()

13 years ago

You could do something like this:

var dotCounter = 0;
(function addDot() {
setTimeout(function() {
if (dotCounter++ < 10) {
$('#dots').append('.');
addDot();
}
}, 1000);
})();

--Karl

zietaphon

Re: Re: javascript sleep(), wait(), and use of setTimeout()

13 years ago

GREAT LOGIC!

very nice structure dude.

why is the function in () ?

kebber10

Re: Re: javascript sleep(), wait(), and use of setTimeout()

10 years ago

Or to print out the 10 dots within 1 second:

var dotCounter = 0;
(function addDot() {
setTimeout(function() {
if (dotCounter++ < 10) {
$('#dots').append('.');
addDot();
}
}, 100);
})();

charlesmc..

Re: javascript sleep(), wait(), and use of setTimeout()

13 years ago

Well, if you insist on using a hammer to slice a loaf of bread, you could use setTimeout using recursions and whatnot... or you could just use setInterval as I suggested earlier:

var dotCounter = 0;
var intId = setInterval(addDot,1000);
function addDot(){
if (dotCounter < 10) {
dotCounter++;
$('#dots').append('.');
} else {
clearInterval(intId);
}
}

bitbonsai

Re: javascript sleep(), wait(), and use of setTimeout()

12 years ago

@zietaphon: The function inside () and with () right after it is called "self executable function". Straightforward, isn't it?

@charlesmcnulty: The thing about setInterval is tries to execute itself even if the JS is executing another block of code. Then it starts to queue, and finally when you have the code executed, it will do one right after the other, without any time between then. And the only way to stop setInterval from queuing is by using clearInterval.

That's why it's better to use setTimeout() calling itself. it will only execute once if JS is busy and you guarantee that the next one will wait the defined amount of time before executing.

Even more about JS timers: http://ejohn.org/blog/how-javascript-timers-work/

Cheers

Wolff