函数的防抖和节流

前端之家收集整理的这篇文章主要介绍了函数的防抖和节流前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

防抖

所谓防抖,就是指触发事件后在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);

 

猜你在找的JavaScript相关文章