• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

防抖与节流的实现

开发技术 开发技术 2周前 (04-29) 8次浏览

防抖与节流的实现

防抖和节流的作用是避免事件被高频触发时带来的大量资源消耗,典型的场景就是鼠频繁点击某个按钮。当一个事件被触发时,防抖函数需要设置一个定时器,如果在指定的时间间隔内事件没有被再次触发就执行回调函数,否则应该清除并重新设置定时器。总而言之,防抖函数需要完成两个功能:1.当事件被触发时,不立即执行回调函数。2.在指定的时间间隔内事件没有被再次触发,执行回调函数。

 1 // 防抖功能的实现
 2 const deBounce = function (fn, delay) {
 3     let timeOut = null; //定时器
 4     return function () {
 5         // 如果事件被再次触发,清除定时器
 6         if (timeOut) {
 7             clearTimeout(timeOut);
 8         }
 9         
10         // 设置定时器,如果在指定时间间隔内事件没有被触发则执行回调函数fn
11         timeOut = setTimeout( () => {
12             fn.apply(this, arguments);
13         }, delay);
14     }
15 }

 

节流的作用在于避免回调函数随着事件的高频触发被高频执行。节流函数需要完成两个功能:1.当事件被触发时,等待一段时间再执行回调函数。2.当事件被多次触发时,在指定的时间间隔内回调函数只能被执行一次。

 1 const throttle = function (fn, delay) {
 2     // canRun表示回调函数是否可以被执行
 3     let canRun = true;
 4     return function () {
 5         //如果canRun为false,代表此时不能执行回调函数
 6         if (!canRun) {
 7             return;
 8         }
 9         
10         // 将canRun设置为false,避免回调函数在某一时间段内被多次执行
11         canRun = false;
12         
13         // 即使可以执行回调函数也需要等待一段时间再执行
14         setTimeout( () => {
15             fn.apply(this, arguments); //执行回调函数
16             canRun = true; // 回调函数执行完毕后需要将canRun设置为true
17         }, delay);
18     }
19 }

 


程序员灯塔
转载请注明原文链接:防抖与节流的实现
喜欢 (0)