什么是节流和防抖
节流和防抖的本质都是用闭包的形式，通过对事件对应的回调函数进行包裹，用自由变量缓存时间信息，最后用 setTimeout 来控制事件的触发频率。
-
节流 throttle
节流是指在一定的时间内，不管触发多少次回调函数，都只执行一次。
-
防抖 debounce
防抖是指在一定时间内，如果再次调用回调函数，则开始新的计时，不管调用了多少次，只触发最后一次。
具体实现
-
throttle
var throttle = function(func, delay) { // 内存中定义变量保存信息（闭包） var timer = null; // 返回的这个函数就是频繁执行的函数，在其内部进行节流操作 return function() { var context = this; var args = arguments; // 节流逻辑——规定时间内不会执行被节流的函数，每当timer为null之后才会执行一次。 if (!timer) { timer = setTimeout(function() { func.apply(context, args); timer = null; }, delay); } } } // 被节流的处理函数 function handle() { console.log(Math.random()); } // 频繁执行的函数(用滚动事件举例) window.addEventListener('scroll', throttle(handle, 1000)); -
debounce
// 防抖 function debounce(fn, wait) { var timeout = null; return function() { if(timeout !== null) clearTimeout(timeout); timeout = setTimeout(fn, wait); } } // 被防抖的处理函数 function handle() { console.log(Math.random()); } // 频繁执行的函数(用滚动事件举例) window.addEventListener('scroll', debounce(handle, 1000));相关文档
