防抖和节流

遠古來風

1. 防抖，回城-执行完成区间计时的一次

限时内，多次触发，只执行最后一次，并清空计时器。未计时完就一直清除计时器。
思路：利用闭包，保存回调函数的计时器。判断计时器是否存在，是-清除原计时器。计时器内调用事件处理函数。
注意：这里要搞清楚返回的匿名函数才是绑定的点击事件，而非 debounce 函数。匿名函数可以访问父函数 debounce 声明的 timer，每次调用匿名函数时，timer 的数据得到保留。

1. <button>防抖-计时器</button>
2. <button>防抖-非计时器</button>

复制代码

1. // 使用计时器
2. let btn = document.querySelector('button');
3. btn.addEventListener('click', debounce(handler));
4. // 事件处理函数
5. function handler(e) {
6.   console.log(e);                        //!未传入参数时为undefine
7.   console.log(this);        //!未修改时为window
8. }
9. // 防抖函数
10. function debounce(fn) {
11.   let timer;
12.   // 新的事件会覆盖旧的事件，直到最后一件事等待1s后执行
13.   return function (e) {                                                // 返回作为回调事件
14.     let _this = this;                                                        // 注意：es5中计时器的this只能指向window，用箭头函数可继承父业
15.     if (timer) clearTimeout(timer);
16.     timer = setTimeout(function () {
17.       // 传入函数调用，提高可复用性
18.       fn.call(_this, e); //！修改this，得去记，得去用啊宝宝:call/bind/apply
19.     }, 1000)
20.   }
21. }

复制代码

也可以用节流的计时方式。

1. // 不使用计时器
2. let btn1 = document.querySelector('.liu');
3. btn1.addEventListener('click', (function () {
4.     let currTime = Date.now();
5.     return function (e) {
6.       let nowTime = Date.now();
7.       if (nowTime - currTime < 3000) { // 时效内点击，刷新计时器
8.           currTime = nowTime;
9.           return;
10.       }
11.       // 调用处理函数
12.       console.log(e)
13.       console.log(this)
14.       currTime = nowTime; // 处理完毕，刷新计时器
15.     }
16. })())

复制代码

2. 节流，只执行第一次-区间内禁止触发第二次

思路：记录第一次执行调用的时间戳，超时才能执行下一次调用，并重置起始时间。
限时内，多次触发，只执行第一次，直到计时结束。（合理来说应该是直到第一个执行完毕，可以设置标记，执行完修改标记，作为锁）
？疑问：这里的标记，如果是c++存在指针，可以传引用，事件处理函数可以直接修改指针值，js 没有可以使用指针一说，要怎样实现指针的能力？

1. // 节流：多次触发，只执行第一个，直到第一个执行完
2. window.addEventListener('scroll', throttle(handlerScroll, 1000));
3. // 事件处理函数
4. function handlerScroll(e) {
5.   console.log(e);
6.   console.log(this);
7. }
8. // 节流函数
9. function throttle(fn, delay) {
10.   let prevTime = Date.now();
11.   return function (...arg) {
12.     let nowTime = Date.now();
13.     if (nowTime - prevTime > delay) { // 区间计时结束，执行处理，并刷新起始时间
14.       fn.apply(this, arg);
15.       prevTime = Date.now();
16.     }
17.   }
18. }

复制代码

来源:https://www.cnblogs.com/chaofanhaochi/p/18309510
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！