Throtle只是debounce的包装器，它使debounce在一段时间内调用传递的函数，如果debounce在一段时间内延迟函数调用，该时间大于Throtle中指定的时间。

假设我们有一个回调函数“cb”，要在事件“E”时调用。 让“E”在1秒内被触发1000次，因此会有1000次对“cb”的调用。也就是1个电话/毫秒。为了优化，我们可以使用:

节流:节流(100ms)，“cb”将 在第100毫秒，第200毫秒，第300毫秒，…1000 ms)。也就是1次呼叫/100毫秒。这里对“cb”的1000次调用优化为10次调用。 debounning:当debounning为(100ms)时，“cb”只会在[1100秒]被调用一次。这是发生在第1000毫秒的最后一次触发“E”后的100毫秒。这里对“cb”的1000次调用优化为1次调用。

一幅图胜过千言万语

节气门

防反跳

注意Debounce直到事件流停止才会触发。但是，Throttle会在每个间隔时间内触发一个事件。

(感谢css-tricks)

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

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

lodash库建议以下文章https://css-tricks.com/debouncing-throttling-explained-examples/详细解释Debounce和Throttle之间的区别及其起源

油门(1秒):你好，我是机器人。只要你一直打我，我就会继续和你说话，但每次一秒后。如果你在一秒之前ping我的回复，我仍然会在1秒的间隔内回复你。换句话说，我就是喜欢隔一定的时间间隔回复。

弹跳(1秒):嗨，我是那个^^机器人的表弟。只要你一直ping我，我就会保持沉默，因为我喜欢在你最后一次ping我一秒钟后才回复。我不知道，是因为我的态度有问题还是因为我不喜欢打断别人。换句话说，如果您在上次调用后的1秒内一直向我请求回复，您将永远不会得到回复。是的是的…去吧!说我粗鲁就好。

节流阀(10分钟):我是一台伐木机。我将系统日志发送到我们的后端服务器，每隔10分钟。

反弹(10秒):嗨，我不是那台伐木机的表亲。(在这个想象的世界中，并不是每个脱锁器都与节流器有关)。我在附近一家餐馆当服务员。我应该让你知道，只要你一直在你的订单中添加东西，我就不会去厨房执行你的订单。只有在您上次修改订单后10秒后，我才会认为您已经完成了订单。到那时我才会去厨房执行您点的菜。

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

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