据我所知，简单来说 节流-类似于调用setInterval(回调)的特定次数，即在事件发生的时间内调用同一函数的特定次数 和. . deboundation -类似于调用setTImeout(callbackForApi)或在事件发生后经过一定时间后调用函数。 这个链接很有用 https://css-tricks.com/the-difference-between-throttling-and-debouncing/

简单来说:

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

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

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

差异

+--------------+-------------------+-------------------+
|              |  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    |
+--------------+-------------------+-------------------+

用例解释:

搜索栏-不想搜索每次用户按下键?当用户停止输入1秒时想要搜索。使用debounce 1 SEC按下键。 射击游戏-手枪每次射击之间需要1秒的时间，但用户点击鼠标多次。在鼠标点击时使用油门。

角色互换:

Throttling 1 sec on search bar- If users types abcdefghij with every character in 0.6 sec. Then throttle will trigger at first a press. It will will ignore every press for next 1 sec i.e. bat .6 sec will be ignored. Then c at 1.2 sec will again trigger, which resets the time again. So d will be ignored and e will get triggered. Debouncing pistol for 1 sec- When user sees an enemy, he clicks mouse, but it will not shoot. He will click again several times in that sec but it will not shoot. He will see if it still has bullets, at that time (1 sec after last click) pistol will fire automatically.

进一步解释投入产出与现实生活的比较

酒吧外面有几个警卫。警卫允许说“我去”的人进入酒吧。这是正常的情况。任何说“我去”的人都可以进入酒吧。

现在有一个Throttle Guard(节流5秒)。他喜欢最先回应的人。谁先说“我要去”，他就让那个人去。然后他会在5秒内拒绝每个人。在这之后，无论谁先说，他都会被允许，其他人会被拒绝5秒。

还有另一个弹跳守卫(弹跳5秒)。他喜欢能让他精神休息5秒钟的人。所以如果有人说“我去”，警卫会等5秒钟。如果5秒钟内没有其他人打扰他，他会允许第一个人打扰他。如果有人在这5秒内说“我要去”，他会拒绝第一个。他又开始了等待第二个人的5秒，看第二个人是否能让他得到精神上的休息。

一个现实生活中的类比帮助我记住:

谈话结束。你等对方说完再回答。 鼓形钻头。你只在简单的4/4鼓位上演奏音符。

debounce的用例:

打字。你想在用户停止输入后做一些事情。所以在最后一次击键后等待1秒是有意义的。每次击键重新启动等待。 动画。当用户停止将鼠标悬停在某个元素上时，需要将其收缩。不使用debounce可能会导致不稳定的动画，因为光标会无意中在“热”和“冷”区域之间移动。

节流的用例:

滚动。你想要对滚动做出反应，但限制所做的计算量，所以每100毫秒做一些事情就足以防止潜在的延迟。 鼠标移动。与滚动相同，但用于鼠标移动。 API调用你想在某些UI事件上触发API调用，但想限制API调用的数量，以免使服务器过载。

节流阀的简单概念是在表单中频繁点击提交按钮，我们需要使用节流阀。因此提交功能可以防止频繁点击。它将相同的请求保存到函数中。

关于debounce，编写了一个简单的带有输入文本标签的代码，用于从服务器上搜索一些数据。Oninput使用debounce删除之前的请求，并将最后输入的单词传递给服务器

const throttle = (callback, time = 0) => {
    let throttle_req, count = 0;
     return async function () {
         var context = this, args = arguments;  
         if(throttle_req) return;  
         throttle_req = true; 
         if(time > 0)
         {
             callback.apply(context, args); 
             setTimeout(() => {
              throttle_req = false; 
             }, time || 200) 
         }
         else
         {
           let response = await callback.apply(context, args); 
            throttle_req = false; 
           return response;
         } 
     }
  }
const debounce = (callback, time = 0) => {
    let debounce_req;
    return function () {
        var context = this, args = arguments;
        clearTimeout(debounce_req) 
        debounce_req = setTimeout(() => {
             debounce_req = null;
             callback.apply(context, args);
        }, time || 200) 
    }
}

我们如何调用:只是用节流或debounce包装你的函数来检查差异

节流阀:同一按钮点击超过1次

var throttleFunct = throttle(function(num) {
  console.log(num, "hello throttle")
}, 2000);
throttleFunct(300) //it execute. because its the first call
throttleFunct(400) //it won't execute

节流异步没有时间

var getDataAsync =  throttle(function(id, name) {
    return new Promise((resolve) => {  
      setTimeout(() => {
            resolve({name: name, id: id})
      }, 2000)
     }) 
});
async function test() {
let response = await getDataAsync(120, 'Sherley').then(resp => resp)  
console.log(response, "respond") //it execute. because its the first call
response = await getDataAsync(120, 'James').then(resp => resp)  
console.log(response, "respond2")//it executes 2 after first request
response = await getDataAsync(120, 'Jonathan').then(resp => resp)  
console.log(response, "respond3")//it executes 3 after second request
    }
    test()

例如:搜索框自动完成

var debounceFunct = debounce(function(num) {
  console.log(num+1)
}, 2000);
debounceFunct(300) //it won't execute and it cancelled
debounceFunct(400) // it executes and it replaced with the previous call. because this is the latest event fire

这篇文章解释得很好，也有图形。

https://css-tricks.com/debouncing-throttling-explained-examples/

从文章中(并进行了一些澄清):

这(节流)和deboundation之间的主要区别在于节流保证了函数的定期执行，至少每X毫秒执行一次。

通常debounce在指定时间结束时调用函数，而throttle在第一次调用节流函数时调用。有时debounce可以采取额外的配置，将此更改为在开始时执行调用。当使用特定的配置调用时，debounce的一些实现实际上可以做油门所做的事情(参见Lodash源代码)。