JS的节流和防抖都是为了解决一些高频触发的问题,比如滚动、拖拽、输入框输入等等。
节流(Throttle): 执行一次后,一段时间内不接受第二次请求,直到这段时间过去。比如说,一段时间内,最多只能发一次请求。
实现方式:在一定时间内,只执行一次事件。
function throttle(fn, wait) { let timer = null; return function() { const context = this; const args = arguments; if (!timer) { timer = setTimeout(function() { fn.apply(context, args); timer = null; }, wait); } }; }
防抖(Debounce):当持续触发事件时,一定时间内没有再触发事件,事件处理函数才会执行一次,如果在这段时间内又触发了事件,就重新开始计时。比如说,我们在输入框输入文字时,如果没有做防抖处理,每次输入文字都会触发事件,这样会非常影响性能。
实现方式:设置一个计时器,在一定时间段内,如果事件没有被触发,就执行事件。
function debounce(fn, delay) { let timer = null; return function() { const context = this; const args = arguments; if (timer) { clearTimeout(timer); } timer = setTimeout(function() { fn.apply(context, args); timer = null; }, delay); }; }