如何切换jQuery中setInterval函数的状态？

Question

我希望能够点击一个id为暂停的元素来开始时间对象中元素的计数，如果我再次点击暂停，它会停止并重新启动它，就像JQuery中的切换功能一样但是使用setInteval函数我该如何去做这件事？

$("#pause").click(function(ffe) { 
    if(on == true) { 
    on = false 
    alert("on"); 
    } 
    else { 
    on = true; 
    alert("off"); 
    } 
    if(on == false) { 
    setInterval(function() { 
     $("#timet ul").append("<li>" + $("#time ul") 
        .children('li').length +"</li>"); 

    }, 100); 
    } 
    else { 

    alert("Error"); 
    } 
}); 

Answer 1

一个典型的技术是使用一个单一的主回路的setInterval和简单地使用的if..else逻辑来确定哪些需要运行。这是很多javascript游戏的工作原理：

var on = true; 

// Our master scheduler: 
setInterval(function() { 
    if (on) { 
     $("#timet ul").append("<li>" + $("#time ul") 
     .children('li').length +"</li>"); 
    } 
}, 100); 

// Code to handle the pause button 
$("#pause").click(function(ffe) { 
    on = !on; 
} 

Answer 2

可以使用setTimeout功能，如果你想运行一次的功能，不断setInterval运行，请尝试以下操作：

var on = false; 
$("#pause").click(function(ffe) { 
    if (on) { 
     on = false; 
     setTimeout(function() { 
      $("#timet ul").append("<li>" + $("#time ul") 
        .children('li').length +"</li>"); 
     }, 100); 
    } else { 
     on = true; 
    } 
}); 

Answer 3

您需要使用.clearInterval()停止执行的。

下面是代码：（THE WORKING DEMO）

$("#pause").click((function() { 
    var interId = null; 
    var $ul = $("#timet ul"); 
    return function (e) { 
     if (interId) { 
      $(this).text("start"); 
      clearInterval(interId); 
      interId = null; 
     } else { 
      $(this).text("pause"); 
      interId = setInterval(function() { 
       $ul.append($('<li>').text($('li', $ul).length)); 
      }, 100); 
     } 
    }; 
}()));​