深入理解JS防抖与节流

日常开发过程中，滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿，这时候我们更希望把多次计算合并成一次，只操作一个精确点，JS把这种方式称为debounce（防抖）和throttle（节流）

函数防抖

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次。

functiondebounce(fn, wait){vartimeout =null;//定义一个定时器returnfunction(){if(timeout !==null)                clearTimeout(timeout);//清除这个定时器timeout = setTimeout(fn, wait);      }}// 处理函数functionhandle(){console.log(Math.random()); }// 滚动事件window.addEventListener('scroll', debounce(handle,1000));

如上所见，当持续触发scroll函数，handle函数只会在1秒时间内执行一次，在滚动过程中并没有持续执行，有效减少了性能的损耗

函数节流

当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次

用一句话总结防抖和节流的区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行

实现函数节流我们主要有两种方法：时间戳和定时器

例如

varthrottle =function(func, delay){varprev =Date.now();returnfunction(){varcontext =this;//this指向windowvarargs =arguments;varnow =Date.now();if(now - prev >= delay) {            func.apply(context, args);            prev =Date.now();        }    }}functionhandle(){console.log(Math.random());}window.addEventListener('scroll', throttle(handle,1000));

这个节流函数利用时间戳让第一次滚动事件执行一次回调函数，此后每隔1000ms执行一次，在小于1000ms这段时间内的滚动是不执行的

再举一个定时器的例子：

varthrottle =function(func, delay){vartimer =null;returnfunction(){varcontext =this;varargs =arguments;if(!timer) {            timer = setTimeout(function(){                func.apply(context, args);                timer =null;            }, delay);        }    }}functionhandle(){console.log(Math.random());}window.addEventListener('scroll', throttle(handle,1000));

当触发事件的时候，我们设置了一个定时器，在没到1000ms之前这个定时器为null，而到了规定时间执行这个函数并再次把定时器清除。也就是说当第一次触发事件，到达规定时间再执行这个函数，执行之后马上清除定时器，开始新的循环，那么我们看到的效果就是，滚动之后没有马上打印，而是等待1000ms打印，有一个延迟的效果，并且这段时间滚动事件不会执行函数。