防止间隔在多次单击时排队

时间:2012-08-04 09:39:05

标签: javascript jquery

我已经使用setInterval函数创建了简单的脚本,它在第一次按钮单击时工作正常,但是如果我几次单击我的按钮,我的间隔排队!我试图用Jquery使用一个函数来解决这个问题但是我无法再次设置我的Intereval。
有没有办法防止这种情况发生?谢谢!!
Fiddle example
我的代码:

 var changeClass=function(){

   if($('ul li.active').length==0){
   $('ul li:first').addClass('active');
   }
    else if($('.active').next().length==0){
       $('.active').removeClass('active');
       $('ul li:first').addClass('active');
    }
      else{
      $('.active').removeClass('active').next('li').addClass('active')
      }

 } 

$(document).ready(function() {
 var intervalID;
    $(".button").click(function(){
    intervalID=setInterval(changeClass,1000);
    });

      $(".clear").click(function(){
      clearInterval(intervalID);
      });

});

1 个答案:

答案 0 :(得分:2)

那你究竟想做什么?如果您希望在设置间隔时忽略开始按钮,请按以下方式编写单击处理程序:

$(".button").click(function() {
    if(!intervalID) {
        intervalID = setInterval(changeClass,1000);
    }
});

如果您希望启动按钮重新启动,则每次单击开始按钮时都可以单击清除按钮,如下所示:

$(".button").click(function(){
    // Perform a click on the clear button
    $(".clear").click();

    intervalID = setInterval(changeClass,1000);
});

$(".clear").click(function(){
    clearInterval(intervalID);
});