使用方便有用的方法,以减少代码行数,提高我们的工作效率,增加我们的摸鱼时间。
debounce 方法
创建一个debdeprecated
函数,该函数将延迟调用所提供的函数,直到自上次调用该函数后至少经过ms
毫秒。
debounce 想必有开发经验前端基本都用过,在这里就不多解释,直接来看实现。
实现
const debounce = (fn, ms = 0) => {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
}
}
说明一下:
-
每次调用
debounced
函数时,用``clearTimeout()清除当前的待定的timeout
,并使用setTimeout()
创建一个新的timeout
,将调用函数的时间推迟到至少ms
毫秒之后。 -
使用
function.prototype.apply()
将this
上下文应用于函数并提供必要的参数。 -
省略第二个参数,
ms
,将使用默认值0ms
。
大白话翻译一下就是,如果当前函数被调用,在指定ms
时间内,如果还有函数进来,则清到已定时的函数,重新生成一个新的定时函数。 如果在指定的ms
后,没有新的函数进来,则执行已定时的函数。
示例
window.addEventListener(
'resize',
debounce(() => {
console.log(window.innerWidth);
console.log(window.innerHeight);
}, 250);
);
说明:当窗口大小不断变化时,控制台不会打印任务东西,直到250m
后窗口不变化时才打印。