场景
在我们日常开发中,有许多场景都会导致同一事件被频繁触发,严重的会导致浏览器崩溃。
- Window对象的resize、scroll事件
- 拖拽时元素时的mousemove事件
- 按键的mousedown、keydown、keyup事件
- …
解决
那么,为了避免性能过差或者浏览器崩溃,就有了防抖
、节流
一说
debounce(防抖)
当调用函数n毫秒
后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。这种比较适合window
的resize
事件,实际需求大多为停止改变大小n毫秒
后执行后续处理。
function debounce(fn, wait) {
var timer = null;
return function () {
var context = this;
var args = arguments;
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(function () {
fn.apply(context, args)
}, wait)
}
}
throttle(节流)
当连续调用函数时,再计时器的周期内只会执行函数一次。
function throttle(fn, wait) {
var timer;
return function () {
var context = this;
var args = arguments;
if (!timer) {
timer = setTimeout(function () {
timer = null;
fn.apply(context, args);
}, wait);
}
};
};
使用
配合jquery
// 防抖
$(window).resize(debounce(function () {
console.log('window, resize');
}, 300))
// 节流
$('input').keyup(throttle(function(){
console.log($(this).val());
}, 300))