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
– TommyBs, Commented Dec 24, 2012 at 14:29
´setTimeout´is executed only once, ´setInetrval´is a executed after interval until clearInterval is called — sdespont
– sdespont, Commented Dec 24, 2012 at 14:31
You could do that quite easily with setTimeout(), but why would you want to do that? — Crozin
– Crozin, Commented Dec 24, 2012 at 14:32

extramaster · Accepted Answer · 2012-12-24 14:49:30Z

1

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

edited Dec 24, 2012 at 14:49

answered Dec 24, 2012 at 14:32

extramaster

2,6532 gold badges27 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Talha Akbar Over a year ago

well buddy thats a good technique but instead of writing more code, you should use setInterval function....

jchand Over a year ago

I want to know one thing why setTimeout execute in every 50 millisecond inside the function it should execute once.

extramaster Over a year ago

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.

Peeyush Kushwaha · Accepted Answer · 2012-12-24 14:40:43Z

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, 2012 at 14:40

Peeyush Kushwaha

3,6538 gold badges40 silver badges77 bronze badges

5 Comments

Loktar Over a year ago

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.

Peeyush Kushwaha Over a year ago

stackoverflow.com/questions/729921/settimeout-or-setinterval says this answer is correct

Loktar Over a year ago

Look at the higher voted answer :P stackoverflow.com/users/18936/bobince it may not of been accepted by the original asker, but the community valued it more.

Peeyush Kushwaha Over a year ago

Yeah i agree with this answer -> stackoverflow.com/questions/729921/… , but you cannot say that my answer is incorrect

Loktar Over a year ago

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.

GautamJeyaraman · Accepted Answer · 2012-12-24 14:41:41Z

0

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.

answered Dec 24, 2012 at 14:41

GautamJeyaraman

5452 silver badges11 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:04:32Z

0

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();
    })
});

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Dec 24, 2012 at 14:44

Loktar

35.3k7 gold badges96 silver badges106 bronze badges

Collectives™ on Stack Overflow

setTimeout vs setInterval in javascript

4 Answers 4

3 Comments

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related