应用场景:滚动条事件监听
问题1:为什么需要使用防抖函数?举个例子
在项目中,我们可能需要通过监听图片的加载来重新获取(条用scroll.refresh函数)滚动的区域(scrollerHeight),我们一次请求的图片可能是很多张,而请求的速度也比较快,就会出现在短时间内频繁执行refresh函数,致使服务器性能降低。
解决方法:
利用防抖函数,在某个时间期限内,事件处理函数只执行一次
/*
* 封装一个防抖函数
* 防抖函数传入两个参数
* 1.func [function] 需要防抖的函数refresh
* 2.delay [number] 毫秒,防抖期限值
*/
debounce(func, delay) {
let timer = null;
//...args是指refresh()传入的值可以是多个
return function (...args) {
//1.第一次图片请求加载的时候timer是null,所以不会执行if这个语句,
//直接进入到计时器,然后开始计时
//2.如果在第一次进入计时器时,在delay时间内又加载的图片
//那么此时timer已经不为null了,会进入到if语句把timer清空,再重新计时
if (timer) clearTimeout(timer);
timer = set