节流
实现:
/**
* 函数节流:开始会执行一次,持续触发事件的话,每隔wait时间执行一次;
* 应用场景mousemove, scroll等会连续执行的事件,比较适合应用于动画相关的场景。
* @param fn 需要节流的函数
* @param wait 间隔时间
*/
export function throttle(fn, wait = 1000) {
let lastTime = 0; //上次执行的时间
return function (...args) {
let now = +new Date();
if (now - lastTime > wait) {
lastTime = now;
fn.apply(this, args);
}
}
}
使用:
mounted() {
// 触发resize的时候会先执行一次,如果下次触发resize和上次触发resize时间大于wait(不论中间有没有持续触发resize),那么会再次执行函数
window.addEventListener(
"resize",
(this._resize = throttle(()=>{console.log("视口改变")}, 5000))
);
},
destroyed() {
window.removeEventListener("resize", this._resize);
}
防抖
实现:
/**
* 函数防抖:触发事件的wait 时间后才执行; 如果wait 时间内事件持续被触发,则以新触发的时间为标准,然后wait 时间后再执行;
(不持续触发,wait 时间后执行一次;如果持续触发,以最后触发为准,也wait 时间后只执行一次)
* 应用场景: 输入验证,提交按钮点击事件
* @param fn 需要防抖的函数
* @param wait 等待时间
*/
function debounce(fn, wait = 1000) {
let timer = undefined; //定时器id
return function (...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, wait);
}
}
说明
以上持续触发是指wait时间内触发两次以上:
不持续触发时(wait时间内只触发一次): 节流只在触发时执行一次;防抖会在触发事件wait时间后执行一次;
持续触发(wait时间内触发两次以上): 节流在每一个wait时间开始都会执行一次;防抖会在最后一次触发的wait时间后只执行一次
节流和防抖解释起来比较混乱,要自己多去使用,并结合实现的代码,才慢慢会有所体会。
这里推荐一篇司徒正美的节流和防抖文章
原文地址:https://www.cnblogs.com/XHappyness/p/11857158.html
时间: 2024-11-05 20:28:22