Question

我有一个名为customevent的活动。当这个事件发生时，我需要在div上切换一个类。

这是有效的，但事件有时会连续多次触发。当发生这种情况时，会再次添加和删除类，这不是我想要的。

  $(document).on('customevent', function(event, data) {
        $('.class').toggleClass('toggle-class');
  });

当事件发生时，我需要立即切换课程。但是，即使事件继续发生，我也需要该类不能被切换1秒钟。以下不起作用。

  var is_blocked;

  $(document).on('customevent', function(event, data) {
      if (is_blocked !== true) {
        $('.class').toggleClass('toggle-class');
        is_blocked = true;
        setTimeout(function(){
          is_blocked = false; 
        }, 1000);
      }
  });

Answer 1

为什么不将is_blocked设置为时间戳而不是布尔值？类似的东西：

var blocked_time = 0;

$(document).on('customevent', function(event, data) {
    if (blocked_time + 1000 < new Date().getTime()) {
        $('.class').toggleClass('toggle-class');
        blocked_time = new Date().getTime();
    }
});

Answer 2

你很亲密，但没有sigar

var is_blocked = false;

$(document).on('customevent', function(event, data) {
    if (!is_blocked) {

        $('.class').toggleClass('toggle-class');

        is_blocked = true;

        setTimeout(function(){
            is_blocked = false; 
        }, 1000);
    }

    is_blocked = true; 
    //I'll be set to true, and in a second ill be false
    //thanks to the timeout. This might not be a stable solution
    //because what happens if the function is spammed for over a second?
});

每次函数独立于is_blocked运行时，您需要将true设置为if-statement。

Answer 3

您可能希望查看debounce（或lodash中的throttle）函数，该函数可能会像这样使用

var throttled = debounce(function() {
  // your actions will be executed at max
  // once every 1000ms
}, 1000);

$(document).on('event', throttled);

关于主题：https://davidwalsh.name/javascript-debounce-function

在事件上立即触发一个函数但等待x秒直到它能够再次运行？

3 个答案: