防抖
所谓防抖，就是指触发事件后在n秒内函数只能触发一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。
/* 防抖函数 @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秒中只执行一次函数。
节流函数 @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);
