js防抖与节流

Posted yang_nick

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js防抖与节流相关的知识,希望对你有一定的参考价值。

防抖与节流是个老生常谈的问题了,实际工作中多多少少也会有应用的场景,并且也是面试中的高频考点,但是很多人对这两个概念是有点傻傻分不清楚,作出的答案很难让人满意。

很长一段时间里面我自己也是这样,当需要用到防抖和节流,都是直接到网上一搜,copy下来就用了,貌似也没出啥问题。

但是如果让你自己手写一个,你能很利索的写出没问题的代码吗,估计没那么简单了。

要了解这两个的作用以及区别,得先搞清楚这两货到底是干嘛的,解决了啥问题,什么情况下改用哪个,这样子,自己头脑就不会混乱。

其实仔细想想,两个的原理是比较简单的

防抖和节流的目的都是减少时间触发的次数,但是两者还是有一点点区别

防抖:就是事件整合,你一直点一个按钮,如果不做处理的话,你点一次,就触发一次事件,如果你恶意瞎点击,那我就每次都得响应,很浪费资源并且容易导致崩溃,正常情况下,我们是你点一次有一个小间隔,如果下次点击的时间超过了这个间隔,那么就触发事件,否则等待,这个间隔时间其实就相当于是一个确认的过程。

 1   function debounce(fn,delay) {
 2         var timeout = null; // 创建一个标记用来存放定时器的返回值
 3         return function (e) {
 4             // 每当用户输入的时候把前一个 setTimeout clear 掉
 5             clearTimeout(timeout);
 6             // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发,就不会执行 fn 函数
 7             timeout = setTimeout(() => {
 8                 fn.apply(this, arguments);
 9             }, delay);
10         }
11     }
12     function click(a,b,c) {
13         console.log(this)
14         console.log(‘点击了‘,arguments);
15     }
16     var btn=document.querySelector(‘.btn‘);
17     btn.onclick=  debounce(click,2000)

 

节流:有点像定时漏斗,上面一直在加东西,下面的口是定时开关的,每隔几秒开一次,这样,当你滑动屏幕的时候,scroll事件是实时触发的,我们通过节流减少时间的触发次数,节约资源

 1     //节流throttle代码:
 2     function throttle(fn,delay) {
 3         let canRun = true; // 通过闭包保存一个标记
 4         return function () {
 5             // 在函数开头判断标记是否为true,不为true则return
 6             if (!canRun) return;
 7             // 立即设置为false
 8             canRun = false;
 9             // 将外部传入的函数的执行放在setTimeout中
10             setTimeout(() => {
11                 // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
12                 // 当定时器没有执行的时候标记永远是false,在开头被return掉
13                 fn.apply(this, arguments);
14                 canRun = true;
15             }, delay);
16         };
17     }
18 
19     function sayHi(e) {
20         console.log(‘节流:‘, e.target.innerWidth, e.target.innerHeight);
21     }
22     window.addEventListener(‘resize‘, throttle(sayHi,500));

当然,上面的都是最简单的实现,更全面的写法可以通过lodash去引入

以上是关于js防抖与节流的主要内容,如果未能解决你的问题,请参考以下文章

面试必问题:JS防抖与节流

js防抖与节流

JavaScript性能优化8——防抖与节流

JavaScript性能优化8——防抖与节流

深入理解JS防抖与节流

JS防抖与节流