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

关于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

deboning和throttle之间的主要区别在于，debounce在用户未在特定时间内执行事件时调用函数，而throttle在用户执行事件时以指定时间间隔调用函数。

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

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

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

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

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

ref

这里真正重要的是，用最简单的话说:如果你有一些连续重复一段时间的操作(如鼠标移动，或页面大小调整事件)，你需要运行一些函数来响应，但你不想对每个操作都做出反应(因为这可能会损害性能)，你有两个选择:

debounce - you skip all incoming actions, except the last one (the 'last one' is defined by the 'wait' time period you set for debounce function, for example, 2s - it will consider that actions flood stopped, if no actions were taken for 2s, and then it will react. This strategy is reasonable if you don't care about regular updates, you just need to react at least once. throttle - if you want to react 'on schedule', to make regular updates even if actions flood is endless, you make your function run at regular intervals (no more often, then the specified time interval), for example 2s throttling will mean that your response will be executed an once if action is taken, but no less then 2s after that. So with continuous actions flood your response will be run on 0s, 2s, 4s, 6s, 8s...

差异

+--------------+-------------------+-------------------+
|              |  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秒，看第二个人是否能让他得到精神上的休息。