概念解释
防抖 debounce
触发高频事件过 n 毫秒后，函数才会被执行一次， 若在这 n 毫秒内又调用此动作， 则重新计算执行时间。
缺陷： 如果事件在规定的时间间隔内不断的触发，则调用方法会不断的延迟。
节流 throttle
预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。
区别： 节流不管事件触发多频繁，都会保证在规定时间内一定会执行一次事件处理函数，防抖只是在最后一次事件后才触发一次事件函数。
应用场景
为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟、假死或卡顿的现象。
代码实现
函数防抖 debounce
function _debounce(fn, wait){ let timer = null; // 创建一个标记用来存放定时器的返回值 return function(){ // 每当用户输入的时候把前一个setTimeout clear 掉 clearTimeout(timer); // 创建一个新的setTimeout， 保证internal间隔内如果事件持续被触发， 不会执行fn函数 timer = setTimeout(() => { fn(); }, wait); };}
// 业务处理函数function handle(){ console.log("Hello, World!");}
// 浏览器滚动事件window.addEventListener('scroll', _debounce(handle, 1000));
复制代码
函数节流 throttle
// 时间戳实现方法function _throttle(fn, wait){ var previous = Date.now(); // 记录上一次运行的时间 return function(){ let now = Date.now(); //当上一次执行的时间与当前的时间差大于设置的执行时间间隔时长的话，就主动执行一次 if(now - previous >= wait){ fn(); previous = Date.now(); // 执行函数后， 马上记录当前时间 } }}
// 业务处理函数function handle(){ console.log("Hello, World!");}
// 浏览器滚动事件window.addEventListener('scroll', _throttle(handle, 1000));
复制代码
// 定时器实现方法function _throttle(fn, wait){ var timer = null; return function(){ if(!timer){ timer = setTimeout(() => { fn(); timer = null; }, wait); } }}
// 业务处理函数function handle(){ console.log("Hello, World!");}
// 浏览器滚动事件window.addEventListener('scroll', _throttle(handle, 1000));
复制代码
评论