频繁执行一段JS逻辑代码对性能会有很大的影响，比如监听 resize、scroll、mousemove等事件，并作出相应的DOM操作，或者逻辑中需要进行后端请求，此时会发现每移动一定像素便触发了大量的回调函数，回调函数中又伴随着DOM操作，或者后端请求，继而引发浏览器的重排与重绘，性能差的浏览器可能会直接假死。为此，需要降低触发回调的频率，而函数节流（throttle）与函数去抖（debounce）是在时间轴上控制函数的执行次数。
函数防抖（debounce）：在事件触发 n 秒后再执行回调，如果这 n 秒内又被触发，则重新计时。
例如：实现对于输入框连续输入进行AJAX验证。
没有去抖之前：
function ajax(content){
console.log('ajax request ' + content);
}
var input = document.getElementById('input');
input.addEventListener('keyup', function(e){ajax(e.target.value)})
- 1
- 2
- 3
- 4
- 5
- 6
此时每按一个键就会触发一次 ajax 请求。现在用debounce方法改进：
function ajax(content){
console.log('ajax request ' + content);
}
function debounce(func, delay){
return function(args){
var _this = this,
_args = args;
clearTimeout(func.id);
func.id = setTimeout(func.call(_this, _args),delay);
}
}
var debounceAjax = debounce(ajax, 1000);
var input = document.getElementById('input');
input.addEventListener('keyup', function(e){debunounceAjax(e.target.value)})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
此时，并不是每按一个键就会触发 ajax 请求，而是当停止输入并在指定时间内没有输入的时候，才会执行相应的回调函数。
函数节流（throttle）：规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某个事件被触发多次，只有一次能生效。
例如：继续上面的例子，使用throttle方法改进：
function ajax(content){
console.log('ajax request ' + content);
}
function throttle(func, delay){
var last, deferTimer;
return function(){
var _this = this,
_args = arguments,
now = +new Date();
if(last && now < last + delay){
clearTimeout(deferTimer);
deferTimer = setTimeout(function(){
last = now;
func.apply(_this, _args);
}, delay);
} else {
last = now;
func.apply(_this._args);
}
}
}
var throttleAjax = throttle(ajax, 1000);
var input = document.getElementById('input');
input.addEventListener('keyup', function(e){throttleAjax(e.target.value)})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
此时，ajax回调是每隔1s执行一次。
