Question

想知道如何使.off（）仅在特定时间段内发生。我有一个div，一旦点击我想要禁用点击事件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...
    }
});

请注意，您还应该在UI中显示.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);
});

一段时间后开/关功能

4 个答案: