函数的抖动:简单来说就是一个函数在短时间内大量频繁调用,但是很多次调用都不是必须的
在js中,哪些情况容易遇到抖动?
到底哪些事件会频繁调用?
鼠标移动事件
移入移出事件
input输入事件
滚动条滚动事件(onscroll)
尺寸改变事件(onresize)
…
而很多次函数其实没必要调用,他都是无效执行,所以要想办法解决;
解决抖动之防抖
防抖:就是防止函数内的代码在短时间内大量执行,只让它最终执行一次
步骤:
把要执行的代码包到setTimeout里
在短时间内大量调用函数的时候,先把上一次的计时器清掉,再开一个新的,这样就能保证短时间内大量调用函数时,代码不会被执行(因为在不断的刷新计时器)
只有当你停下来一段时间,计时器才会执行
let timerID = null;
document.body.onscroll = function () {
clearTimeout(timerID)
// 把要执行的代码打包到计时器里
timerID = setTimeout(() => {
console.log('滚动了');
}, 300); //0.5秒
}
封装成函数
function fangdou(callback, time) {
//因为这个函数内部需要用到timerID,所以应该吧timerID
//声明就写到函数内部,所以写成了闭包
let timerID = null;
return function () {
clearTimeout(timerID)
// 把要执行的代码打包到计时器里
timerID = setTimeout(callback, time); //time时间后调用callback函数
}
}