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 사용하는 것입니다 : 여기

는 코드입니다. 이것은 많은 자바 스크립트 게임이 작동하는 방식입니다 :

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

당신은 setInterval 실행 지속적으로, 다음과 같은 시도는 setTimeout 기능을 사용할 수 있습니다 :

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