Question

我正在侦听一个事件，我需要在它发生时运行一个函数（在这个示例控制台日志中用于演示我的代码）。

这是有效的，但是事件连续多次发生，我只希望函数运行一次。我怎样才能立即运行该功能，然后等待一秒才能再次触发？

  $(document).on('someEvent', function(event, data) {
    if (var === 'something') {
      console.log('Run');
    }
  });

更新：要明确，我需要等待活动＆＃39; someEvent＆＃39;在我的控制台功能运行之前发生。

Answer 1

有些喜欢吗？

var is_blocked = false;

var block = function( time_to_wait ) {
    is_blocked = true;

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

$(document).on('someEvent', function(event, data) {
    if ( is_blocked === false ) {
        block( 1000 );
        console.log('Run');
    }
});

Answer 2

功能“functionToBeCalled（）”将立即执行，每0.4秒执行一次。如果你想在0.4s后再次调用该函数，而不是每次都用setTimeout替换setInterval。

var variable = "something";

 $("#button").on('click', function(event, data) {
    if ( variable === 'something') {
      console.log('Run');
      setTimeout(function(){
        $("#button").trigger("click");
      }, 1000)
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button">Button</div>

Answer 3

如果您不介意使用外部库，请使用lodash's debounce方法。请注意，文档中的示例与您描述的情况非常相似。选项（前导/尾随）可用于自定义行为。

Answer 4

您可以使用当前时间：

var waitUntil = Date.now();

$(document).on('someEvent', function(event, data) {
    if (Date.now() >= waitUntil) {
        waitUntil = Date.now() + 5000 // 5 seconds wait from now
        console.log('Run');
    }
});

这是fiddle，它使用按钮点击作为事件，并在屏幕上提供有关事件是否被处理的反馈。

Answer 5

有一个名为underscore.js的小型库，它有很多有用的功能。其中有_.debounce：

debounce_.debounce(function, wait, [immediate])

创建并返回传递函数的新去抖版本   这会将其执行推迟到等待毫秒之后   自上次调用以来经过的时间。对实施有用   只有在输入停止到达后才会发生的行为。   例如：渲染Markdown注释的预览，重新计算   窗口停止调整大小后的布局，依此类推。

对于立即参数传递true会导致debounce触发   函数在前导而不是等待的后沿   间隔。在防止意外情况下很有用   双击第二次点击“提交”按钮。

在你的情况下，这是一个包装处理程序函数的问题（我使用了100ms的超时）：

$(document).on('someEvent', _.debounce(function(event, data) {
  if (var === 'something') {
    console.log('Run');
  }
}, 100));

Answer 6

这是一个小巧的功能，可能会有所帮助：

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        }, wait);
        if (immediate && !timeout) func.apply(context, args);
    };
}

立即运行JavaScript但等待x秒才能再次运行？

6 个答案: