一定时间后开启/关闭功能

Question

想知道如何使.off（）仅在特定时间段内发生。 我有一个div，一旦单击，我想禁用click事件2秒钟，然后允许再次单击。 目前我所能做的就是单击div，然后单击它就关闭了。

这是我要问的简短示例：

$('.test').on('click', function() {
    // *do stuff*
    $('.test').off('click'); *for a certain perdiod of time*
});

Answer 1

使用布尔变量作为标志来声明是否应执行单击处理程序，而不是附加/分离多个元素中的事件，是一项非常简单的任务。 尝试这个：

var clickEnabled = true;

$('div').click(function() {
    clickEnabled = false;
    setTimeout(function() {
        clickEnabled = true;
    }, 2000);
});

$('.test').on('click', function(e) {
    if (!clickEnabled) {
        e.preventDefault();
    } else {
        // do stuff...
    }
});

请注意，您还应该使禁用.test的事实在用户界面中可见，否则，当访问者单击需要执行操作的元素时，它们只会使访问者感到困惑和烦恼，但是什么也不会发生。

Answer 2

一段时间后激活怎么办？

function myFunction() {
   ...do stuff
   $('.test').off('click'); for a certain perdiod of time
   setTimeout(function(){ $('.test').on('click', myFunction)}, 2000);
}

Answer 3

使用setTimeout，您可以执行以下操作：

var enabled = true;
var timeoutSeconds = 2;

$(function () {
  $('.test').on('click', function(e) {
    if (enabled) {
      // *do stuff*
      enabled = false;
      window.setTimeout(function() {
        enabled = true;
      }, timeoutSeconds * 1000);
    } else {
      e.preventDefault();
    }
  });
});

Answer 4

您可以这样做。

function onClick() {

  // do stuff here

  $('.test').off('click');

  setTimeout(function(){
       $('.test').on('click', onClick);
  }, 2000)
}

$('.test').on('click', onClick);

或者您可以使用css和toggleClass做到这一点

// css
.disabled {
  pointer-events: none;
}

// js
$('.test').on('click', function(){
   // do stuff here

   $('.test').addClass('disabled');
   setTimeout(function(){
     $('.test').removeClass('disabled');
   }, 2000);
});