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

Question

Wondering how you can make .off() only happen for a specific period of time. I have a div which once clicked i want to disable the click event for 2 seconds, and then be allowed to click again. At the moment all I have is the div can be clicked, then once clicked it is off.

Here is a brief example of what I am asking:

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

Answer 1

It's a much simpler task to use a boolean variable as a flag to state whether the click handler should be executed, instead of attaching/detaching events from multiple elements. Try this:

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...
    }
});

Note that you should also make the fact that .test is disabled visible in the UI, otherwise you'll just confuse and annoy your visitors when they click an element expecting an action, but nothing happens.

Answer 2

What about activate on after a certain period of time?

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

Answer 3

Using the setTimeout you may do something like:

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

You could do it like this.

function onClick() {

  // do stuff here

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

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

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

Or you can do it with css and toggleClass

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

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

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