使用setInterval的多个实例

时间:2011-10-11 20:20:54

标签: javascript jquery setinterval

我在这里有一个jsFiddle:http://jsfiddle.net/dztGA/22/

目标:基本上,我试图在同一页面上有2个离散计时器,可以在mouseover / mouseout(暂停)或手动进程中重建(重新启动) )。

问题:我的jsFiddle的单个计时器将说明的是当我点击“停止计时器”时,我的setInterval(存储在变量t中)似乎有多个实例,尽管是用clearInterval销毁的(t )。当我单击“重新启动计时器”时,这一点就变得很明显,它似乎有2个独立的计时器,如快速增量所示。

警告:我尽可能多地研究SO,但因为我将在页面上有两个不同的滑块,我不能使用任何“清除所有计时器”方法,所以我尝试将每个存储在变量中。

我希望这很清楚。感谢您的观点。

2 个答案:

答案 0 :(得分:8)

要解决当前问题:在重置按钮的clearInterval(window.t)功能中添加onclick

能够拥有多个计时器的方法。但这需要一定的结构 小提琴(6个定时器!):http://jsfiddle.net/dztGA/27/

(function(){ //Anonymous function, to not leak variables to the global scope
    var defaultSpeed = 3000; //Used when missing
    var timerSpeed = [500, 1000, 2000, 4000, 8000];

    var intervals = [];
    function increase(i){
        return function(){
            var elem = $("#count"+i);
            elem.text(parseFloat(elem.text()) + 1);
        }
    }
    function clear(i){
        return function(){
            clearInterval(intervals[i]);
        }
    }
    function restart(i){ //Start AND restart
        return function(){
            clear(i)();
            increase(i)();
            intervals[i] = setInterval(increase(i), timerSpeed[i]||defaultSpeed);
        }
    }
    // Manual increment
    $('input[name=increment]').each(function(i){
        $(this).click(function(){
            restart(i)();
            increase(i)();
        });
    });

    // Clear timer on "Clear"
    $('input[name=clear]').each(function(i) {
        $(this).click(clear(i));
    });

    // Restart timer on "Restart"
    $('input[name=reset]').each(function(i) {
        $(this).click(restart(i));

        //Optionally, activate each timer:
        increase(i)();
    });
})();

答案 1 :(得分:1)

// Clear timer on "Clear"
$('input[name=clear]').click(function() {
    window.clearInterval(t);
});

应该是

// Clear timer on "Clear"
$('input[name=clear]').click(function() {
    window.clearInterval(window.t);
});

因为this输入不是Window