Loop timer in JavaScript

Question

I need to execute a piece of JavaScript code say, each 2000 milliseconds.

setTimeout('moveItem()',2000)

The above will execute a function after 2000 milliseconds, but won't execute it again.

So inside my moveItem function I have:

function moveItem() {
    jQuery(".stripTransmitter ul li a").trigger('click');
    setInterval('moverItem()',2000);
}

This does not work because I want to execute the trigger click jQuery piece of code each interval of 2000 milliseconds, but right now it is being called all the time and the script needs to be interrupted. Besides that, I feel this is very bad quality coding... How would you guys solve this?

when must the script be interrupted? – Natrium Jan 25 '10 at 15:19 — Natrium, Jan 25 '10 at 15:19
Hi, I will never interrupt it. – Marcos Buarque Jan 25 '10 at 15:27 — Marcos Buarque, Jan 25 '10 at 15:27

score 207 · Accepted Answer · edited Jan 25 '10 at 17:20

207

Note that setTimeout and setInterval are very different functions:

setTimeout will execute the code once, after the timeout.
setInterval will execute the code forever, in intervals of the provided timeout.

Both functions return a timer ID which you can use to abort the timeout. All you have to do is store that value in a variable and use it as argument to clearTimeout(tid) or clearInterval(tid) respectively.

So, depending on what you want to do, you have two valid choices:

// set timeout
var tid = setTimeout(mycode, 2000);
function mycode() {
  // do some stuff...
  tid = setTimeout(mycode, 2000); // repeat myself
}
function abortTimer() { // to be called when you want to stop the timer
  clearTimeout(tid);
}

or

// set interval
var tid = setInterval(mycode, 2000);
function mycode() {
  // do some stuff...
  // no need to recall the function (it's an interval, it'll loop forever)
}
function abortTimer() { // to be called when you want to stop the timer
  clearInterval(tid);
}

Both are very common ways of achieving the same.

edited Jan 25 '10 at 17:20

Matt Ball

354,903
100
647
710

answered Jan 25 '10 at 15:18

Miguel Ventura

10,344
2
31
41

Go with the first one. Its better. Just have the timeout function create a new timeout call to itself. – a432511 Jan 25 '10 at 15:20
2

You make me understand obviously between `setTimeout` and `setInterval `, Thank @Miguel Ventura – Frank Myat Thu Dec 06 '12 at 09:31
@a432511 They seem to be slightly different to me, but I'm not sure about implementation. In setInterval, does it start the timer at the beginning or end? If it starts the timer at the end, the real delay is the given delay + the time to execute the code. I reckon setInterval would be more accurate to the delay you provide. – Cruncher Jul 31 '15 at 22:31

score 8 · Answer 2 · answered Jan 25 '10 at 15:17

setInterval(moveItem, 2000);

is the way to execute the function moveItem every 2 seconds. The main problem in your code is that you're calling setInterval inside of, rather than outside of, the callback. If I understand what you're trying to do, you can use this:

function moveItem() {
    jQuery('.stripTransmitter ul li a').trigger('click');
}

setInterval(moveItem, 2000);

N.B.:Don't pass strings to setTimeout or setInterval - best practice is to pass an anonymous function or a function identifier (as I did above). Also, be careful to not mix single and double quotes. Pick one and stick with it.

score 3 · Answer 3 · answered Jan 25 '10 at 15:17

3

It should be:

function moveItem() {
  jQuery(".stripTransmitter ul li a").trigger('click');
}
setInterval(moveItem,2000);

setInterval(f, t) calls the the argument function, f, once every t milliseconds.

answered Jan 25 '10 at 15:17

ntownsend

7,462
9
38
35

score 2 · Answer 4 · answered Jan 25 '10 at 15:17

2

I believe you are looking for setInterval()

answered Jan 25 '10 at 15:17

Derek Adair

21,846
31
97
134

score 0 · Answer 5 · answered Feb 19 '13 at 13:00

Here the Automatic loop function with html code. I hope this may be useful for someone.

<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
background-color: #abc;
width: 40px;
height: 40px;
float: left;
margin: 5px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><button id="go">Run »</button></p>
<div class="block"></div>
<script>

function test() {
$(".block").animate({left: "+=50", opacity: 1}, 500 );
   setTimeout(mycode, 2000);
};
$( "#go" ).click(function(){
test();
});
</script>
</body>
</html>

Fiddle: DEMO

score -2 · Answer 6 · answered Jan 25 '10 at 15:17

-2

You should try something like this:

 function update(){
    i++;
    document.getElementById('tekst').innerHTML = i;
    setInterval(update(),1000);
    }

This means that you have to create a function in which you do the stuff you need to do, and make sure it will call itself with an interval you like. In your body onload call the function for the first time like this:

<body onload="update()">

answered Jan 25 '10 at 15:17

Younes

4,825
4
39
66

1

Code is broken. You're passing `undefined` to setInterval and recursively calling `update()` forever without any pause. (hint: the return value of update() is what you are passing to setInterval here) – slebetman Jan 25 '10 at 15:22
1

-1 you create a new repeating interval every time you call this function .. its plain wrong .. and has the same problem the OP is asking help for .. – Gabriele Petrioli Jan 25 '10 at 17:25

Loop timer in JavaScript

6 Answers6

Linked