什么是节流和防抖
节流和防抖的本质都是用闭包的形式,通过对事件对应的回调函数进行包裹,用自由变量缓存时间信息,最后用 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));