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

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

将debounce和throttle放在一起可能会非常令人困惑，因为它们都共享一个称为延迟的参数。

防反跳。延迟是等到不再有调用时，再调用它。就像关闭电梯门一样:门必须等到没有人试图进入时才能关闭。

节流。延迟是以一定的频率等待，然后调用最后一个。很像手枪射击，枪只是不能超过一定的射速。

让我们看一看实现的细节。

function debounce(fn, delay) {
  let handle = null
  
  return function () {
    if (handle) {
      handle = clearTimeout(handle)
    }
    
    handle = setTimeout(() => {
      fn(...arguments)
    }, delay)
  }
}

Debounce，继续中断超时，直到不再中断为止，然后触发fn。

function throttle(fn, delay) {
  let handle = null
  let prevArgs = undefined
  
  return function() {
    prevArgs = arguments
    if (!handle) {
      fn(...prevArgs)
      prevArgs = null
      handle = setInterval(() => {
        if (!prevArgs) {
          handle = clearInterval(handle)
        } else {
          fn(...prevArgs)
          prevArgs = null
        }
      }, delay)
    }
  }
}

Throttle，存储最后一个调用参数，并设置一个间隔来触发，直到没有过去的调用。

相似之处。它们都有延迟时间，并且在延迟期间不会发生火灾，特别是当只有一场火灾时。两者都不聚合过去的事件，因此事件的数量可能与实际的火灾不同。

的区别。在有重复事件的弹跳情况下，延迟可以延长。而在节流阀情况下的延迟是固定的。所以一般来说，油门产生的火焰比反弹产生的火焰要多。

很容易记住。将组捆绑为一个。节流保持捆绑调用在一定的频率。

更新1-20-23

Throttle可能不需要setInterval，这是我最近写的一个新版本，它也照顾到了这个问题。

function throttle(fn, delay) {
  let canFire = true
  let queue = []

  function pop() {
    if (queue.length < 1) return 

    const [that, args] = queue.pop()
    fn.apply(that, args)
    canFire = false
    setTimeout(() => {
      canFire = true
      pop()
    }, delay)
  }
  
  function push() {
    queue.push([this, arguments])
    if (canFire) pop()
  } 

  push.cancel = () => {
    queue = []
  }

  return push
}

通俗地说:

debound将阻止一个函数在仍然被频繁调用时运行。debound函数只在确定不再被调用后才会运行，此时它只会运行一次。脱绳的实际例子:

如果用户“停止输入”，自动保存或验证文本字段的内容:该操作将只执行一次，在确定用户不再输入(不再按键)之后。 记录用户休息鼠标的位置:用户不再移动鼠标，因此可以记录(最后)位置。

节流只会阻止最近运行过的函数运行，不管调用频率如何。节流的实际例子:

v-sync的实现是基于节流的:从上一次绘制屏幕到现在已经过去了16ms，屏幕才会被绘制。无论调用多少次屏幕刷新功能，它最多只能每16毫秒运行一次。

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

因为这两个函数都可以帮助您延迟和降低某些执行的速度。假设您正在调用由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.

debound允许您管理函数可以接收的调用频率。它将发生在给定函数上的多个调用组合在一起，以便忽略在特定时间持续时间到期之前发生的重复调用。从根本上说，deboundation确保了一个可能发生多次的事件只发送了一个信号。

节流将函数接收的调用频率限制在固定的时间间隔内。它用于确保目标函数的调用频率不会超过指定的延迟。节流是降低重复事件的速率。

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