函数节流（throttle）与函数去抖（debounce）

频繁执行一段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执行一次。