0

好的，所以我试图通过更改元素的 id 并将两个不同的函数应用于不同的 id 来启动/停止 setInterval 函数。这是目前的代码：

$(document).ready(function(){
  var seq
  $('#start').click(function(){
     $(this).attr('id','stop');
     seq=self.setInterval(function(){blah()},125);
  });
  $('#stop').click(function(){
     $(this).attr('id','start');
     clearInterval(seq);
  });
});

当我单击#start 元素时，setInterval 开始并且id 更改为#stop，但是如果我再次单击（在现在称为#stop 的元素上），则执行#start 的代码（添加了另一个setInterval）谢谢

函数'blah'只是一个组成函数的例子

4

3 回答 3

5

当你说：

$('some selector').click(...

这会将点击处理程序绑定到当时匹配some selector 的所有元素- 它不会自动应用于将来可能匹配的元素。

要将处理程序应用于在单击事件时与选择器匹配的元素，您需要使用委托事件处理程序，这意味着将处理程序附加到父元素（或者document如果元素没有静态父元素）：

$(document).ready(function(){
    var seq
    $(document).on('click', '#start', function(){
        $(this).attr('id','stop');
        seq=self.setInterval(function(){blah()},125);
    });
    $(document).on('click', '#stop', function(){
        $(this).attr('id','start');
        clearInterval(seq);
    });
});

该.on()方法允许您根据传递给它的参数附加“普通”非委托处理程序或委托处理程序。

另一种选择是不更改 id 并仅使用单击处理程序以某种方式测试当前状态：

$(document).ready(function(){
  var seq;
  $('#start').click(function(){
     if (seq) {
        clearInterval(seq);
        seq = null;
     } else
        seq=self.setInterval(function(){blah()},125);
  });
});
于 2013-05-17T22:22:16.273 回答
1

我不会更改 id，因为这不会更改事件绑定。您通常不应该更改元素 id 标记。更好的计划（至少对我而言）是将其设置为一个类。然后使用html数据标签来决定状态是什么。

<button type="button" class="buttonClass" data-state="start">Button Text</button>

$(document).ready(function(){
  var seq
  $('.buttonClass').click(function(){
     var state = $(this).data('state');
     if(state=='start') {
         //do start interval stuff
         seq=self.setInterval(function(){blah()},125);
         $(this).data('state','stop'); //Change the state now
     } else if(state=='stop') {
         //do stop interval stuff
         clearInterval(seq)
         $(this).data('state','start'); //Change the state again
     }
  });
});
于 2013-05-17T22:26:06.200 回答
0

Why don't you just check for the state like this (no need to add event listener to document):

$(document).ready(function(){
    var seq;
    $('#start').on('click', function(){
        if(!$(this).hasClass('running')){
            seq=self.setInterval(function(){blah()},125);
            $(this).addClass('running');
        }
        else{
            $(this).removeClass('running');
            clearInterval(seq);
        }
    });
});
于 2013-05-17T22:27:33.700 回答