Question

每隔1秒使用以下jquery更改图像

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

作为自动更换器，它的工作正常。现在我需要添加下一个按钮。我在下一次按钮点击时调用相同的imagechanger（）函数。这也很好

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

但是假设在调用第一个更改并等待4秒后我按下一个按钮，当我点击按钮图像正在改变但是下一秒另一个更改调用也被触发。

那我怎么能重置时间？

Answer 1

要重置间隔，您需要将其存储到变量中，然后在创建新变量之前在其上调用clearInterval。试试这个：

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

Answer 2

我的解决方案是制作一个简单的Timer对象并让它处理间隔。

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

我需要每5秒调用一次函数并重置持续时间

2 个答案: