函数的防抖和节流
Posted z937741304
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了函数的防抖和节流相关的知识,希望对你有一定的参考价值。
防抖
所谓防抖,就是指触发事件后在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);
以上是关于函数的防抖和节流的主要内容,如果未能解决你的问题,请参考以下文章