防抖
在事件被触发n秒后再执行回调, 如果这n 秒内又被触发, 则重新计时(如 输入用户名让后台验证, 为了避免频繁向后台发送请求, 需等用户停止输入后才向后台发送验证信息)。resize、scroll事件。
var debounce = function (func, delay) {
return function (args) {
var that = this;
var _args = args;
clearTimeout(timer);
var timer = setTimeout(() => {
func.call(that, _args);
}, delay);
}
}
节流
规定在一个时间单位内只能触发一次函数。如果多次触发, 则只要一次生效。比如表单的多次提交。
var throttle = function(func, delay) {
var last, deferTimer;
return function(args) {
var that = this;
var _args = args;
var now = +new Date();
if (last && now - last > delay) {
// 超过了限定的时间执行函数;
last = now;
func.call(that, _args);
} else {
// 没有超过时, 清除。
clearTimeout(deferTimer);
deferTimer = setTimeout(() => {
last = now; // 赋值last
func.call(that, _args);
}, delay);
}
}
}