I need to call a function in every 5 second with time duration reset

Question

am using below jquery for change image in every 1 second

window.setInterval(function(){ imagechanger(); }, 5000);

as automatic changer its working fine. now i need to add next button. I call the same imagechanger() function on the next button click. That is also working fine

$('body').on('click','#next',function(){
    imagechanger();     
 });

But suppose after calling the first change and waiting 4 seconds then i press the next button, when i click the button image is changing but the very next second another change call also triggered.

So how can i reset the time ??

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval — SubjectCurio, Mar 25 '15 at 10:17
http://stackoverflow.com/questions/18270009/reset-timer-of-setinterval also http://code-tricks.com/start-stop-and-reset-javascript-setinterval/ — CodeWithCoffee, Mar 25 '15 at 10:18
Duplicate:http://stackoverflow.com/questions/8126466/javascript-reset-setinterval-back-to-0 — Mox Shah, Mar 25 '15 at 10:18

Rory McCrossan · Accepted Answer · 2015-03-25T10:23:19.680

5

To reset an interval you need to store it to a variable then call clearInterval on it before creating the new one. Try this:

// on load
var interval = setInterval(imagechanger, 5000);

$('body').on('click', '#next', function() {
    clearInterval(interval); // clear current interval
    imagechanger(); // call instantly
    interval = setInterval(imagechanger, 5000); // create new interval   
});

edited Mar 25 '15 at 10:23

answered Mar 25 '15 at 10:17

Rory McCrossan

331,213
40
305
339

`interval = setInterval(imagechanger, 5000);` is better in your click event. To reassign the interval into `interval` – R3tep Mar 25 '15 at 10:23
This is much simpler and sweeter than my answer. Nice! – Michael Coxon Mar 25 '15 at 10:34

score 2 · Answer 2 · answered Mar 25 '15 at 10:31

My solution was to make a simple Timer object and have it handle the interval.

http://jsfiddle.net/fk5cnvc2/

var Timer = function (interval) {
    var me = this;
    var timeout = null;

    me.interval = interval;

    me.tick = function () {};

    me.reset = function () {
        if (timeout != null) {
            clearTimeout(timeout);
        }
        timeout = setTimeout(function () {
            me.tick();
            timeout = null;
            me.reset();
        }, me.interval);
    }

    me.start = function () {
        me.reset();
    }

    me.stop = function () {
        clearTimeout(timeout);
    }
}

    function addResult() {
        $('#results').append("<div>Tick!</div>");
    }

var myTimer = new Timer(5000);
myTimer.tick = addResult;

$('#button').on('click', function() {
    addResult();
    myTimer.reset();
});

myTimer.start();

I need to call a function in every 5 second with time duration reset

2 Answers2