节流强制在一段时间内可以调用函数的最大次数。就像“最多每100毫秒执行一次这个函数。”

deboundation强制函数不被再次调用，直到一段时间过去而没有被调用。就像“仅在100毫秒后未被调用时才执行该函数。”

ref

节流

节流强制一个函数可以被调用的最大次数 加班。就像“每100次执行一次这个函数 毫秒。”假设在正常情况下你会这样做 在10秒内运行1000次。如果你把它控制在一次 每100毫秒，它最多只执行该函数100次 次

(10s * 1,000) = 10,000ms
10,000ms / 100ms throttling = 100 maximum calls

消除抖动

撤销强制函数不再被调用，直到 一段时间过去了，它还没有被调用。就像在 “只有在100毫秒之后才执行这个函数 被称为”。

也许一个函数在短时间内被调用1000次，分散在3秒内，然后停止被调用。如果您在100毫秒时将其解除，则该函数只会在爆发结束后的3.1秒内触发一次。每次在爆发期间调用该函数时，它都会重置反弹计时器

来源:-油门和反弹

我个人认为反弹比油门更难理解。

因为这两个函数都可以帮助您延迟和降低某些执行的速度。假设您正在调用由throttle/debounce反复返回的装饰函数…

节流:在指定的时间段内，原函数最多被调用一次。 Debounce:在指定的时间后，调用方停止调用被修饰的函数后，将调用原始函数。

我发现debounce的最后一部分对于理解它试图实现的目标至关重要。我还发现_.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秒发送一条新消息，而你的即时通讯应用程序图标上下跳动，你可以…

Naive approach: check every message as long as it arrives. When your app icon bounces, check. It's not the most effective way, but you are always up-to-date. Throttle approach: you check once every 5 minutes (when there are new ones). When new message arrives, if you have checked anytime in the last 5 minutes, ignore it. You save your time with this approach, while still in the loop. Debounce approach: you know Chatty, she breaks down a whole story into pieces, sends them in one message after another. You wait until Chatty finishes the whole story: if she stops sending messages for 5 minutes, you would assume she has finished, now you check all.

简单来说:

节流将延迟执行函数。它将减少多次触发事件的通知。 deboundation将一系列对函数的连续调用合并为对该函数的单个调用。它确保为多次触发的事件发出一个通知。

你可以直观地看到其中的区别

如果你有一个函数被调用了很多次——例如当一个调整大小或鼠标移动事件发生时，它可以被调用很多次。如果您不想要这种行为，您可以Throttle它，以便定期调用该函数。deboning将意味着它在一系列事件的结束(或开始)时被调用。

debound使函数只能在最后一次调用后的一段时间后执行

function debounce(func,wait){
  let timeout
  return(...arg) =>{
    clearTimeout(timeout);
    timeout= setTimeout(()=>func.apply(this,arg),wait)
  }
}


function SayHello(){
  console.log("Jesus is saying hello!!")
}


let x = debounce(SayHello,3000)
x()

节流模式限制了在一段时间内可以调用给定事件处理程序的最大次数。它允许以指定的时间间隔周期性地调用处理程序，忽略该等待期结束之前发生的每个调用。

function throttle(callback, interval) {
  let enableCall = true;

  return (...args)=> {
    if (!enableCall) return;

    enableCall = false;
    callback.apply(this, args);
    setTimeout(() => enableCall = true, interval);
  }
}


function helloFromThrottle(){
  console.log("Jesus is saying hi!!!")
}

const foo = throttle(helloFromThrottle,5000)
foo()

这实际上是限制一个事件的方法。例如，如果你正在监听onclick事件，如果它是常规的，它将监听你所做的每一次点击。

如果你使用Throttle，它会在你想要监听事件的时间之间设置一个间隔，例如每秒钟监听一次点击。

Debounce的限制更大，它只会在事件开始或结束时触发自己。例如，你正在滚动，你使用Debounce，它只会在你开始和结束滚动时触发。