节流和去抖函数之间的区别

简单来说:

限制将延迟执行功能.它将减少多次触发事件的通知.

Debouncing会将对函数的一系列顺序调用捆绑到对该函数的单个调用中.它确保为多次触发的事件发出一个通知.

您可以直观的看到差别在这里

如果你有一个被调用的函数 - 例如当调整大小或鼠标移动事件时,它可以被调用很多次.如果你不希望这种行为,你可以油门它,这样的函数被调用定期.去抖意味着它会在一堆事件的最后(或开始)被调用.

就我个人而言,我觉得去抖更难理解而不是油门.

因为这两个函数都可以帮助您推迟并降低某些执行速度.假设您正在重复调用油门/去抖动返回的装饰函数...

节流:每个指定时间段最多调用一次原始函数.

去抖:在调用者在指定时间段后停止调用修饰函数后调用原始函数.

我发现去抖的最后一部分对于理解它试图实现的目标至关重要.我还发现_.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分钟,你会认为她已经完成,现在你检查所有.

通俗地说:

反跳将防止功能运行,同时它仍然被频繁调用.去抖动函数只有在确定不再被调用之后才会运行,此时它将只运行一次.去抖的实际例子:

如果用户"停止输入",则自动保存或验证文本字段的内容:在确定用户不再键入(不再按键)之后,操作将仅执行一次.

记录用户放置鼠标的位置:用户不再移动鼠标,因此可以记录(最后)位置.

无论呼叫频率如何,限制都会阻止函数在最近运行时运行.限制的实际例子:

v-sync的实现基于限制:仅在自上次屏幕绘制后经过16ms时才会绘制屏幕.无论调用屏幕刷新功能多少次,它每16ms最多只能运行一次.

油门（1秒）：您好，我是机器人。只要您一直对我执行ping操作，我就会一直与您交谈，但是每次恰好在1秒钟之后。如果您在不到一秒钟的时间内向我ping回复，我仍然会每隔1秒钟回复一次。换句话说，我只是喜欢按固定的间隔回复。

防反跳（1秒）：嗨，我是那个^^机器人的表亲。只要您继续对我执行ping操作，我将保持沉默，因为自上次您ping我以来，我只希望在1秒后回复。我不知道是因为我有态度问题还是因为我不想打扰别人。换句话说，如果自上次调用以来一直在1秒钟之前要求我答复，那么您将永远不会得到答复。是的...继续前进！叫我粗鲁。

油门（10分钟）：我是伐木机。定期间隔10分钟后，我会将系统日志发送到我们的后端服务器。

防抖动（10秒）：嗨，我不是那台伐木机的堂兄。（在这个虚构的世界中，并不是每个防抖器都与油门器相关）。我在附近的一家餐馆当服务生。我应该告诉您，只要您继续向订单中添加商品，我就不会去厨房执行订单。在您上次修改订单后仅10秒钟之后，我将假定您已完成订单。只有这样，我才能在厨房执行您的订单。

酷演示：https：//css-tricks.com/debouncing-throttling-explained-examples/

服务员类比的功劳：https : //codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf

这很简单。

它们执行完全相同的操作（速率限制），只是在调用节流阀时会定期触发您的包装函数，而反跳不会。反跳只是（尝试）在最后一次调用您的函数。

示例：如果您正在滚动，那么在滚动时（每X毫秒），油门将缓慢调用您的函数。防抖将一直等到滚动完成后再调用函数。

用例说明:

搜索栏 -每次用户按键时都不想搜索？想要在用户停止输入1秒后进行搜索.debounce按键1秒后使用.

射击游戏 -手枪每次射击之间需要1秒的时间,但用户单击鼠标多次.用于throttle鼠标单击.

在逆转角色:

在搜索栏上节流1秒 - 如果用户在10秒内输入"长文字...",那么它应该调用搜索大约10次.当按下第一个键"L"时,将调用第一个搜索.

宣布手枪1秒 -当用户看到敌人时,他点击鼠标,但它不会射击.他将在那一秒再次点击几次,但它不会射击.他会看到它是否还有子弹,当时(最后一次点击后1秒)手枪会自动射击.

编辑:

差异

+--------------+-------------------+-------------------+
|              |  Throttle 1 sec   |  Debounce 1 sec   |
+--------------+-------------------+-------------------+
| Delay        | no delay          | 1 sec delay       |
|              |                   |                   |
| Emits new if | last was emitted  | there is no input |
|              | before 1 sec      |  in last 1 sec    |
+--------------+-------------------+-------------------+

Debouncing允许您管理函数可以接收的调用频率.它结合了在给定函数上发生的多个调用,以便忽略在特定持续时间到期之前发生的重复调用.基本上,去抖动可确保为可能多次发生的事件发送一个信号.

限制将函数接收的调用频率限制为固定的时间间隔.它用于确保不会比指定的延迟更频繁地调用目标函数.节流是重复事件发生率的降低.

限制强制执行可以随时间调用函数的最大次数.如"每100毫秒最多执行一次此功能".

Debouncing强制执行一个函数不会被调用,直到一定时间过去而没有被调用.如"只有在没有被调用的情况下经过100毫秒才执行此函数".

REF