前端面试题重绘和重排（什么是防抖和节流）
前端面试题重绘和重排（什么是防抖和节流）节流函数允许一个函数在规定的时间内只执行一次。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style type="text/css"> div { width: 200px; height: 300px; background: red; overflow: auto } </style> </head> <body> <div id="container">scroll 事件本身会触发页面的重新渲染， 同时 scroll
scroll 事件本身会触发页面的重新渲染，同时 scroll 事件的 handler 又会被高频度的触发 因此事件的 handler 内部不应该有复杂操作，例如 DOM 操作就不应该放在事件处理中。 针对此类高频度触发事件问题（例如页面 scroll ，屏幕 resize，监听用户输入等），有两种常用的解决方法，防抖和节流。
典型例子：限制 鼠标连击 触发。
一个比较好的解释是：
当一次事件发生后，事件处理器要等一定阈值的时间，如果这段时间过去后 再也没有 事件发生，就处理最后一次发生的事件。假设还差 0.01 秒就到达指定时间，这时又来了一个事件，那么之前的等待作废，需要重新再等待指定时间。
防抖动函数：
function debounce(fn wait=50 immediate) { let timer; return function() { if(immediate) { fn.apply(this arguments) } if(timer) clearTimeout(timer) timer = setTimeout(()=> { fn.apply(this arguments) } wait) } }
结合实例：滚动防抖
// 简单的防抖动函数 // 实际想绑定在 scroll 事件上的 handler function realFunc(){ console.log("Success"); } // 采用了防抖动 window.addEventListener('scroll' debounce(realFunc 500)); // 没采用防抖动 window.addEventListener('scroll' realFunc);
一个简单的案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style type="text/css"> div { width: 200px; height: 300px; background: red; overflow: auto } </style> </head> <body> <div id="container">scroll 事件本身会触发页面的重新渲染， 同时 scroll 事件的 handler 又会被高频度的触发 因此事件的 handler 内部不应该有复杂操作，例如 DOM 操作就不应该放在事件处理中。 针对此类高频度触发事件问题（例如页面 scroll ，屏幕 resize， 监听用户输入等），有两种常用的解决方法，防抖和节流。</div> <script type="text/javascript"> // 将会包装事件的 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('你刚才拖拽了滚动条！！!'); } // 在 debounce 中包装我们的函数，过 2 秒触发一次 let elem = document.getElementById('container'); console.log('滚动停止后等待两秒钟') elem.addEventListener('scroll' debounce(foo 2000)); </script> </body> </html>
节流是另一种处理类似问题的解决方法。
节流函数允许一个函数在规定的时间内只执行一次。
它和防抖动最大的区别就是，节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。
比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流阀技术来实现。
主要有两种实现方法：
1.时间戳
2.定时器
时间戳：
var throttle = function(func delay) { var prev = Date.now(); return function() { var context = this; var args = arguments; var now = Date.now(); if (now - prev >= delay) { func.apply(context args); prev = Date.now(); } } }
当高频事件触发时，第一次应该会立即执行（给事件绑定函数与真正触发事件的间隔如果大于delay的话），而后再怎么频繁触发事件，也都是会每delay秒才执行一次。而当最后一次事件触发完毕后，事件也不会再被执行了。
定时器实现：
当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行；直到delay秒后，定时器执行执行函数，清空定时器，这样就可以设置下个定时器。
var throttle = fucntion(func delay){ var timer = null; return funtion(){ var context = this; var args = arguments; if(!timer){ timer = setTimeout(function(){ func.apply(context args); timer = null; } delay); } } }
当第一次触发事件时，肯定不会立即执行函数，而是在delay秒后才执行。 之后连续不断触发事件，也会每delay秒执行一次。 当最后一次停止触发后，由于定时器的delay延迟，可能还会执行一次函数。
可以综合使用时间戳与定时器，完成一个事件触发时立即执行，触发完毕还能执行一次的节流函数：
var throttle = function(func delay) { var timer = null; var startTime = Date.now(); return function() { var curTime = Date.now(); var remaining = delay - (curTime - startTime); var context = this; var args = arguments; clearTimeout(timer); if (remaining <= 0) { func.apply(context args); startTime = Date.now(); } else { timer = setTimeout(func remaining); } } }
需要在每个delay时间中一定会执行一次函数，因此在节流函数内部使用开始时间、当前时间与delay来计算remaining，当remaining<=0时表示该执行函数了，如果还没到时间的话就设定在remaining时间后再触发。当然在remaining这段时间中如果又一次发生事件，那么会取消当前的计时器，并重新计算一个remaining来判断当前状态。
推荐在线测试网站 http://demo.nimius.net/debounce_throttle/，
总结
防止一个事件频繁触发回调函数的方式：
防抖动：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。
节流：使得一定时间内只触发一次函数。
它和防抖动最大的区别就是，节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而防抖动只是在最后一次事件后才触发一次函数。
