限制和取消函数之间的区别

2022-08-29 23:19:10

任何人都可以给我一个简单的解释,说明出于速率限制目的而限制和取消函数之间的区别。

对我来说,两者似乎都在做同样的事情。我已经检查了这两个博客来找出答案:

http://remysharp.com/2010/07/21/throttling-function-calls

http://benalman.com/projects/jquery-throttle-debounce-plugin/


答案 1

简单来说:

  • 限制将延迟执行函数。它将减少多次触发的事件的通知。
  • 取消取消会将对函数的一系列顺序调用捆绑到对该函数的单个调用中。它确保为多次触发的事件发出一个通知。

您可以直观地看到这里的区别

如果您有一个经常被调用的函数 - 例如,当发生调整大小或鼠标移动事件时,可以多次调用它。如果不希望出现此行为,可以对其进行限制,以便定期调用该函数。去抖动意味着它在一堆事件的结束(或开始)被调用。


答案 2

就我个人而言,我发现去放弃油门更难理解。

因为这两个函数都可以帮助您推迟和降低某些执行速率。假设您正在反复调用由节流/去抖返回的修饰函数...

  • 限制:原始函数每指定时间段最多调用一次。
  • 去抖动:在调用方在指定时间段后停止调用修饰函数后,将调用原始函数

我发现去抖动的最后一部分对于理解它试图实现的目标至关重要。我还发现_.debounce的旧版本实现有助于理解(由 https://davidwalsh.name/function-debounce 提供)。

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
_.debounce = function(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

一个牵强附会的比喻,但也许也可以有所帮助。

你有一个名叫Chatty的朋友,他喜欢通过IM与你交谈。假设当她说话时,她每5秒发送一条新消息,而您的IM应用程序图标正在上下弹跳,您可以采取...

  • 幼稚的方法:检查每条消息,只要它到达。当您的应用图标反弹时,请检查。这不是最有效的方法,但你总是最新的。
  • 节流方法:每5分钟检查一次(当有新检查时)。当新消息到达时,如果您在过去5分钟内的任何时间进行了检查,请忽略它。您可以使用此方法节省时间,同时仍然在循环中。
  • 反揭方法:你知道Chatty,她把整个故事分解成碎片,在一个又一个消息中发送它们。你等到Chatty完成整个故事:如果她停止发送消息5分钟,你会认为她已经完成了,现在你检查所有。