相关文章：https://segmentfault.com/a/1190000016261602
函数防抖（debounce）（★）
函数需要频繁触发情况时，在事件触发 n 秒后再执行函数，如果在这 n 秒内事件又被触发，则重新开始计时。
也就是说，如果用户在时间间隔内一直触发函数，那么这个防抖函数内部的真正需要执行的函数将永远无法执行。
// 输出传入的参数
function show (content) {
console.log('ajax request' + content);
}
// debounce 函数，将传入的函数延迟 5 秒执行，如果间隔小于 5 秒，就会重新计时
function debounce (fun, delay) {
let timer = null; // 持久化一个定时器 timer
return function (args) {
let _this = this;
let _args = arguments;
// 如果事件被触发，清除 timer 并重新开始计时
clearTimeout(timer);
timer = setTimeout(function () {
fun.call(_this, _args);
// fun.apply(_this, [_args]) 或者用这个
}, delay);
}
}
// 获取 input 输入框
let inputb = document.getElementById('debounce');
// 获取 debounce 函数返回的函数
let debounceShow = debounce(show, 500);
// 添加监听键盘弹起事件，每次弹起就执行后面的函数
inputb.addEventListener('keyup', function (e) {
debounceShow(e.target.value);
})
应用场景：
- 实时搜索：用户在不断输入值时，用防抖来节约请求资源。当在频繁的输入时，并不会发送请求，只有当在指定间隔内没有输入时，才会执行函数。如果停止输入但是在指定间隔内又输入，会重新触发计时。
- 窗口调整：window 触发 resize 的时候，不断地调整浏览器窗口大小会不断触发这个事件，用防抖来让其只触发一次。
函数节流（throttle）（★）
规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。
function throttle (fun, delay) {
let last, deferTimer;
return function (args) {
let _this = this;
let _args = arguments;
let now = +new Date();
if (last && now < last + delay) {
clearTimeout(deferTimer);
deferTimer = setTimeout(function () {
last = now;
fun.apply(_this, _args);
}, delay);
} else {
last = now;
fun.apply(_this, _args);
}
}
}
let throttleShow = throttle(show, 1000);
let inputc = document.getElementById('throttle');
inputc.addEventListener('keyup', function(e) {
throttleShow(e.target.value);
})
应用场景：
- 页面滚动：监听滚动事件，比如是否滑到底部自动加载更多。
- 抢购点击：鼠标不断点击触发，单位时间内只触发一次。
总结
函数防抖和函数节流都是防止某一时间频繁触发，但防抖是某一段时间内只执行一次，而节流是间隔时间执行。