关于节流和防抖的封装

一.节流

1.简要说明

使用场景:拖拽一个元素时,要随时拿到它被拖拽的位置;
适用方式:使用drag,会由于拖拽频繁而发生卡顿;
使用节流: 无论拖拽速度有多快,都让其每隔设定的时间触发一次该事件;
经典说法: 首先第一个可以进入,让这个事件失效delay,在delay时间期间,不能在执行该函数,当一旦到达delay,就执行该事件;

2.代码展示

 1 //html部分
 2 
 3 <div id="div1" draggable="true" style="width:100px;height:100px;background:pink">可拖拽</div>
 4 
 5 //封装块
 6 
 7  const div1 = document.getElementById('div1')
 8         function throttle(fn, delay) {
 9             let timer = null;
10             return function () {
11                 //说明该时间小于delay,就让他跳出;
12                 if(timer) return;
13                 timer = setTimeout(() => {
14                     //一旦delay一到,就清空
15                     clearTimeout(timer);
16                     fn.apply(this, arguments)
17                     timer=undefined;
18                 }, delay);
19             }
20         }
21 
22 //示例
23 
24  div1.addEventListener('drag', throttle(function (e) {
25             console.log(e.offsetX, e.offsetY)
26         }, 500))

      //简写法
1     if(ids) return;
2      ids=setTimeout(()=>{
3       clearTimeout(ids);
4        ids=undefined;
5 
6      },500)

3.实现效果

在拖拽速度过快时,并不是持续打印,而是过了delay后才会打印坐标;不会造成卡顿;

二.防抖

1.简要说明

使用场景:在input输入框输入内容过快;
使用方式:使用keyup事件,会频繁触发change事件;
使用防抖: 用户连续输入时,并不会持续打印,而是在输入结束或暂停时,会触发change事件;
经典说法: 在一定期限内进入后不会执行,当delay达到会执行最后一次进入时的结果;

2.代码展示

 1  var debounce = (fn, delay) => {
 2             return (...args) => {
 3                 timer = setTimeout(() => {
 4                     var timer = null;
 5                     clearTimeout(timer);
 6                     fn(...args)
 7                 }, delay)
 8             }
 9         }
10         input1.addEventListener('keyup', debounce(() => {
11             console.log(input1.value)
12         }, 500))

3.实现效果

在持续在输入框输入值的时候,并不会持续打印,而是受限于delay会触发打印这个事件;

感谢指正,多谢点评

2022-02-17

音乐伴我开发

感谢博主的文献https://blog.csdn.net/express_yourself/article/details/107411794

posted on 2022-02-17 22:14 瞿~锐〃阅读(87) 评论(0) 收藏举报