JS中常见的防抖动（debounce ）和节流阀（throttle ）

它的做法是限制下次函数调用之前必须等待的时间间隔。正确实现 debouncing 的方法是将若干个函数调用合成 一次，并在给定时间过去之后仅被调用一次。

// 将会包装事件的 debounce 函数

function debounce(fn, delay) { // 维护一个 timer let timer = null; return function() { // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量 let context = this; let args = arguments; clearTimeout(timer); timer = setTimeout(function() { fn.apply(context, args); }, delay); } }

// 当用户滚动时被调用的函数 
function foo() { 
console.log(‘You are scrolling!’); 
}

// 在 debounce 中包装我们的函数，过 2 秒触发一次 
let elem = document.getElementById(‘container’); 
elem.addEventListener(‘scroll’, debounce(foo, 2000));

首先，我们为scroll事件绑定处理函数，这时debounce函数会立即调用， 
因此给scroll事件绑定的函数实际上是debounce内部返回的函数

每一次事件被触发，都会清除当前的 timer 然后重新设置超时调用。 
这就会导致每一次高频事件都会取消前一次的超时调用，导致事件处理程序不能被触发

只有当高频事件停止，最后一次事件触发的超时调用才能在delay时间后执行 
节流

节流是另一种处理类似问题的解决方法。 
节流函数允许一个函数在规定的时间内只执行一次。

它和防抖动最大的区别就是，节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。

比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流阀技术来实现。

var throttle = function(func,delay){ var timer = null; var startTime = Date.parse(new Date()); return function(){ var curTime = Date.parse(new Date()); var remaining = delay-(curTime-startTime); var context = this; var args = arguments; clearTimeout(timer); if(remaining<=0){ func.apply(context,args); startTime = Date.parse(new Date()); }else{ timer = setTimeout(func,remaining); } } }

需要在每个delay时间中一定会执行一次函数，因此在节流函数内部使用开始时间、当前时间与delay来计算remaining，当remaining<=0时表示该执行函数了，如果还没到时间的话就设定在remaining时间后再触发。当然在remaining这段时间中如果又一次发生事件，那么会取消当前的计时器，并重新计算一个remaining来判断当前状态。

总结

防止一个事件频繁触发回调函数的方式：

防抖动：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

节流：使得一定时间内只触发一次函数。 
它和防抖动最大的区别就是，节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而防抖动只是在最后一次事件后才触发一次函数。 
原理是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。