我们知道，在一个高频触发的监听事件中，会不断触发所绑定的方法，如onscroll、onmouseover、onkeyup等，在你连续触发该事件，就会不断执行绑定方法。也许你绑定的事件不复杂，加上浏览器性能处理越来越好，你会觉得这没什么，但是，如果绑定的方法执行的内容比较复杂，涉及DOM重排重绘严重或者请求频繁，那么如此高频触发，必将带来性能和交互的严重不友好。
为了解决出现这种情况，防抖和节流，这两种方案为此诞生。
它们都是有一个时间规定，在这个规定下限制某个方法的执行时机。
它们有个共同点，就是指定时间内，只能执行一次。https://www.lodashjs.com/docs/lodash.debounce
防抖：
指定时间内，方法只能执行一次。而这个时间的计算，是从最后一次触发监听事件开始算起。一般表现为，在一段连续触发的事件中，最终会转化为一次方法执行，就像防止抖动一样，你做一个事，防止你手抖不小心重复干了
原理：在每次函数执行之前先清空上一次设置的定时器，原因是：如果执行间隔大于n秒，那么先前的定时任务一定已经执行完毕，当执行clearTimeout时其实并没有定时器可清除；否则定时器就会被清除，然后重新计时
思路：
每次触发事件时都取消之前的延时调用方法
function debounce(fun, delay) {
var timeout;
return function() {
let that = this;
console.log('arguments', arguments);
clearTimeout(timeout);
let args = arguments;
timeout = setTimeout(function() {
console.log('----', that);
fun.call(that, ...args);
//是函数的this指定input, fn()的this是window
//在setTimeout里面执行的函数都会在全局作用域执行所以this会指向window，
//但是fn执行时this指向的上下文环境应该是当前执行的函数，所以要用apply来绑定fn的this指定到当前
}, delay);
};
}
let inputb = document.getElementById('debounce');
let debounceAjax = debounce(ajax, 2000);
inputb.addEventListener('keyup', function(e) {
debounceAjax.call(this, e.target.value);//是函数的this指定input
// debounceAjax(e.target.value);
});
节流：
指定时间内，方法只能执行一次。而这个时间的计算，是从上次执行方法开始算起。一般表现为，在一段连续触发的事件中，根据你设定的时间间隔，降低触发频率，重复执行
思路：
每次触发事件时都判断当前是否有等待执行的延时函数
原理：在每次函数执行之前先判断是否存在定时器，存在则跳过本次执行，否则设置新的定时器
function throttle(fun, delay) {
let last, deferTimer;
return function(args) {
let that = this;
let now = +new Date();
if (last && now < last + delay) {
clearTimeout(deferTimer);
deferTimer = setTimeout(function() {
last = now;
fun.apply(that, arguments);
}, delay);
} else {
last = now;
fun.apply(that, arguments);
}
};
}
let throttleAjax = throttle(ajax, 1000);
let inputc = document.getElementById('throttle');
inputc.addEventListener('keyup', function(e) {
throttleAjax(e.target.value);
});
