防抖
所谓防抖,就是指触发事件后在n秒内函数只能触发一次,如果在n秒内又触发了事件,则会重新计算函数执行时间。
/* 防抖函数 @param {Function} func 要执行的函数 @param {Number} wait 要等待的时间 ms */ function debounce(func,wait) { let timer = null; return function () { 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 */ function throttle(func,wait) { // 记录上一次函数触发的时间 let lastTime = 0; return function () { let NowTime = Date.Now(); let context = this; let args = arguments; if (NowTime - lastTime > wait) { // 修正this指向 func.apply(context,args); lastTime = NowTime; } } };
// 使用方法 document.onmousemove = throttle(function () { console.log(‘函数触发了?‘) },200);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。