在队列中延迟的 Javascript 事件执行

Question

我正在尝试解释我的问题，以便了解更好的解决方法。我搜索了一下，但我不知道如何准确搜索:

• 我有一个包含三个区域的 HTML 页面:面板 A、网格 B 和网格 C。
• 在网格 C 上，我可以对一行执行操作(仅单击它)来更新面板 A 和网格 B 上的一些计数器，但它们是根据数据库总计计算的。
• 当我执行行操作时，我立即更新行并触发面板 A 和网格 B 监听的事件，面板 A 和网格 B 向服务器发送两个请求以更新其计数器。

每一行更新都有点繁重，如果用户快速单击各行，javascript 执行将被锁定，使服务器充满面板 A 和网格 B 的更新，如果在 1 或 2 秒内可以延迟执行一次事件未触发。

我会解决 listenTo 回调的问题，因为它可能是另一个面板，必须“立即”执行事件操作。

我想象这样的事情(只有在 2 秒没有事件被监听后才刷新)，但我认为必须有更好的方法:

var eventTimeout = {}; // one for listener
element.bind('eventName' function() {
    if (eventTimeout['eventName']) {
        clearTimeout(eventTimeout['eventName']); // I understand that if the timeout has been exhausted no error is thrown
    }
    eventTimeout['eventName'] = 
        setTimeout(function() {
            eventTimeout['eventName'] = null;
            doAction(); 
        }, 2000);
});

我会离开那个实现(我还没有测试)，当我有更多时间时，我会把它放在 JSFiddle 上以帮助理解。

Answer 1

您的代码走在正确的轨道上，但您可能想使用类似 lodash-throttle 的东西函数装饰器而不是在这里 IMO 重新发明轮子。

lodash throttle

Creates a throttled function that only invokes func at most once per every wait milliseconds. The throttled function comes with a cancel method to cancel delayed invocations. Provide an options object to indicate that func should be invoked on the leading and/or trailing edge of the wait timeout. Subsequent calls to the throttled function return the result of the last func call.

来自他们自己网站的示例:

// avoid excessively updating the position while scrolling
jQuery(window).on('scroll', _.throttle(updatePosition, 100));

// invoke `renewToken` when the click event is fired, but not more than once every 5 minutes
jQuery('.interactive').on('click', _.throttle(renewToken, 300000, {
  'trailing': false
}));

// cancel a trailing throttled call
jQuery(window).on('popstate', throttled.cancel);