防抖
所谓防抖,就是指触发事件后在n秒内函数只能触发一次,如果在n秒内又触发了事件,则会重新计算函数执行时间。
@H_301_7@/*
防抖函数
@param {Function} func 要执行的函数
@param {Number} wait 要等待的时间 ms
*/
function debounce(func,wait) {
let timer = null;
return () {
let context = this;
let args = arguments;
timer && clearTimeout(timer);
timer = setTimeout(() => {
func.apply(context,args)
},wait);
}
}
// 使用方法
// 使用方法
document.getElementById('btn').onclick = debounce(function () {
this.innerHTML = '按钮' + num++;
},200);
节流
所谓节流,就是指连续触发事件,但是在n秒中只执行一次函数。
@H_301_7@
节流函数
@param {Function} func 要执行的函数
@param {Number} wait 要等待的时间 ms
throttle(func,wait) {
// 记录上一次函数触发的时间
let lastTime = 0 () {
let nowTime = Date.now();
let context = arguments;
if (nowTime - lastTime > wait) {
修正this指向
func.apply(context,args);
lastTime = nowTime;
}
}
};
// 使用方法 document.onmousemove = throttle( () { console.log('函数触发了?') },200);
// 使用方法 document.onmousemove = throttle( () { console.log('函数触发了?') },200);