setTimeout vs setInterval in javascript

Question

Hi can we change setInterval to setTimeout function, it is working fine I want to know can it is done with setTimeout

<head>
<script type="text/javascript">
$(function() {
    var current = $('#counter').text();
    var endvalue = 50
    $('a').click(function() {
        setInterval(function() {
            if (current === endvalue) {

            } else {
                current++;
                $('#counter').text(current)
            }
        }, 50)
    })
})
</script>
</head>
<body>
<div id="counter">0</div>
<a href="#">Click</a>
</body>

Do you mean you want to recursively call setTimeout and see how that is done? Or you just want to call setTimeout to run it once? — TommyBs, Dec 24 '12 at 14:29
´setTimeout´is executed only once, ´setInetrval´is a executed after interval until clearInterval is called — sdespont, Dec 24 '12 at 14:31
You could do that quite easily with `setTimeout()`, but why would you want to do that? — Crozin, Dec 24 '12 at 14:32

extramaster · Accepted Answer · 2012-12-24T14:49:30.943

Use a function to contain the setTimeout, and call it within the function

$(function() {
    var current = $('#counter').text();
    var endvalue = 50;

    function timeoutVersion() {
        if (current === endvalue) {return false;} else {
            current++;
            $('#counter').text(current);
        }
        setTimeout(timeoutVersion, 50);
    }

    $('a').click(function() {
        timeoutVersion();
    })
})

Live Demo | Source

However it's much better to clear the setInterval with clearInterval after you're done with it:

$(function() {
    var current = $('#counter').text();
    var endvalue = 50
    $('a').click(function() {
        var storedInterval = setInterval(function() {
            if (current === endvalue) {
                clearInterval(storedInterval);
            } else {
                current++;
                $('#counter').text(current)
            }
        }, 50)
    })
})

Live Demo | Source

To answer your question - yes, you can change setInterval with setTimeout with some minor changes to the code you've used for setInterval

well buddy thats a good technique but instead of writing more code, you should use setInterval function.... — Muhammad Talha Akbar, Dec 24 '12 at 14:35
I want to know one thing why setTimeout execute in every 50 millisecond inside the function it should execute once. — jchand, Dec 24 '12 at 14:40
A timeout means a single break/pause in time, while an interval [in JavaScript] means a constant recurring re-run of a block of code with breaks. — extramaster, Dec 24 '12 at 14:46

score 0 · Answer 2 · answered Dec 24 '12 at 14:40

0

When you use setInterval() to execute a function say, every 1000 milliseconds, which is equal to 1 second, the function will be triggered every 1000 milliseconds no matter how long the function takes to execute, whereas if you tried to do the same with setTimeout(), if the function was taking, say 500 milliseconds to execute, your total time gap between execution of functions will be 1500 milliseconds.

answered Dec 24 '12 at 14:40

Peeyush Kushwaha

3,453
8
35
69

1

This is incorrect. If the function takes longer than 1000 milliseconds your time will then be off, and `setInterval` will try to catch up using up a higher % of the processor `setTimeout` can be used in such a way to monitor the actual time and get back on track if done properly. – Loktar Dec 24 '12 at 14:45
http://stackoverflow.com/questions/729921/settimeout-or-setinterval says this answer is correct – Peeyush Kushwaha Dec 24 '12 at 14:52
Look at the higher voted answer :P http://stackoverflow.com/users/18936/bobince it may not of been accepted by the original asker, but the community valued it more. – Loktar Dec 24 '12 at 14:53
Yeah i agree with this answer -> http://stackoverflow.com/questions/729921/settimeout-or-setinterval#731625 , but you cannot say that my answer is `incorrect` – Peeyush Kushwaha Dec 24 '12 at 15:00
The portion that's incorrect is `the function will be triggered every 1000 milliseconds no matter how long the function takes to execute`, it will *attempt* to execute it every 1000 ms, but the triggered function can take longer which will throw the interval off so it is an incorrect assumption. – Loktar Dec 24 '12 at 16:10

score 0 · Answer 3 · answered Dec 24 '12 at 14:41

Yes you can call the same function recursively using setTimeout to get the effect of setInterval. Note that in setTimeout, you have to manually check to stop the loop if you use it recursively. But setInterval function returns a id, with which you can call the clearInterval function to stop it whenever needed.

score 0 · Answer 4 · edited May 23 '17 at 12:04

I always recommend setTimeout over setInterval for reasons better explained by bobince While my answer is close to extramaster's I dont advocate the use of interval just to have the ability to clear it. An easier approach is just don't call the next timeout once you've reached your goal

Live Demo

 $(function() {
    var current = $('#counter').text();
    var endvalue = 50;

    function increment() {
        if (current !== endvalue) {
            current++;
            $('#counter').text(current)
            setTimeout(increment, 50);
        }

    }

    $('a').click(function() {
        increment();
    })
});

setTimeout vs setInterval in javascript

4 Answers4

Linked