记录手写防抖和节流
防抖(debounce)
当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次;
如果设定的时间到来之前,又一次触发了事件,就重新开始延时;
1 2 3 4 5 6 7 8 9 10
| const debounce = (fn, t) => { let time; return function (...arg) { clearTimeout(time); let that = this; time = setTimeout(function (...arg) { fn.apply(that, arg); }, t); }; };
|
节流(throttle)
当持续触发事件时,保证一定时间段内只调用一次事件处理函数;
1 2 3 4 5 6 7 8 9
| const throttle = (fn, t) => { let now = Date.now(); return function (...arg) { if (Date.now() - now > t) { fn.apply(this, arg); now = Date.now(); } }; };
|