防抖和节流的背景
为了解决频繁操作造成的频繁事件触发 相当于进行一个优化,当输入完成的时候再触发事件回调,而不是只要数据变化就一直触发事件回调。
防抖
防抖的原理
原理(对比下面示例):事件回调函数(doSomething)在一段时间(300毫秒)后才执行,如果在这段时间内再次调用则重新从0开始计算到300毫秒的时间,当预定的时间内没有再次调用该函数,则执行事件回调函数(doSomething)
理解:
// 示例1:
// _.debounce(事件回调函数, 间隔时间, [true立即调用/false]) 使用的是 underscore库
// 鼠标移动事件,只要鼠标一直动则会一直调用onmousemove函数,也就是_.debounce(doSomething, 300);那么debounce也就会一直重新计算时间,如果移动时间间隔超过300毫秒,那么就执行doSomething回调函数
container.onmousemove = _.debounce(doSomething, 300);
手写防抖
function myDebounce(fn, interval = 500) {
let timeout = null;
return function () {
clearTimeout(timeout);
timeout = setTimeout(() => {
fn.apply(this, arguments);
}, interval);
};
}
function doSomething(){
// onmousemove触发的事件回调函数
}
container.onmousemove = myDebounce(doSomething, 300);
节流
节流原理
原理:单位时间内连续触发,但是只会执行一次,比如事件在300秒内不断触发点击事件,那么只会执行一次,到下一个300s开始计时的时候,就会在下一个300s内再执行一次;也就是说600s连续触发事件但是只会执行2次。(原理让我们知道需要一个标志位)
手写节流
function myThrottle(fn, interval = 500) {
let run = true;
return function () {
if (!run) return;
run = false;
setTimeout(() => {
fn.apply(this, arguments);
run = true;
}, interval);
};
}
function doSomething(){
// onmousemove触发的事件回调函数
}
container.onmousemove = myThrottle(doSomething, 300);
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!