执行任务后绑定？

Question

delay()似乎没有做到这一点。在用户点击.tab后，应该停用它以点击任何其他.tab，并在完成后，再次启用点击次数。

$('.tab').on('click', function() {
    //disable user clicks while performing the stuff below
    $('.tab').unbind();
    //stuff going on here
    //enable clicking again
    $('.tab').delay( 500 ).bind();     
});

Answer 1

文档说：

  

.delay()方法最适合延迟排队的jQuery效果。因为它是有限的 - 例如，它没有提供取消延迟的方法 - .delay()不能替代JavaScript的本机setTimeout函数，这可能更适合某些用例。

delay应该延迟jQuerys fx队列中与动画和效果相关的项目的执行。

出于其他目的，您应该使用setTimeout。由于您已经在使用on，因此您应该使用off并坚持使用on，而不是将其与bind混合使用。

$('.tab').on('click', function handler() {
  //----------------------------^ for re-use
  //disable user clicks while performing the stuff below
  $('.tab').off();
  //stuff going on here
  //enable clicking again
  console.log('test');
  setTimeout(function() {
    $('.tab').on('click', handler);
  }, 5000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab">test</div>

Answer 2

当您致电$('.tab').unbind();时，您会移除所有附加到元素的处理程序，而不会停用该事件。

并且bind需要提供新的事件处理程序。 http://api.jquery.com/bind/

Answer 3

$('.tab').css("pointer-events", "none");

和

$('.tab').css("pointer-events", "auto");

而不是绑定