简介
当前网页中的交互越来越多，很多高频事件带来的性能问题，已经是绕不过去的一个坎。怎么去优化高频事件呢？防抖和节流就必不可少。
概念
防抖：
就是指触发事件后在 n 秒内函数只能执行一次，如果又触发了事件，则会重新计算函数执行时间。
let oBox = document.querySelector('#box');
let testDebounce = debounce(move,1000);
oBox.onmousemove = testDebounce;
function move(ev) {
this.innerHTML = ev.clientX;
}
function debounce(fn,wait) {
let timmer = null;
return function() {
let args = arguments;
let now = !timmer;
timmer && clearTimeout(timmer);
timmer = setTimeout(() => {
timmer = null;
},wait);
if (now) fn.apply(this,args);
}
}
节流：
就是指连续触发事件但是在一段时间中只执行一次函数。
比如：mousemove
每秒都会触发很多，考虑到性能，不需要触发那么多次，节流就是让我们频繁触发的事件，减少触发次数，这就是节流。
const oBox = document.querySelector('#box');
const testJl = jl(move,300);
oBox.onmousemove = testJl;
function move(ev) {
this.innerHTML = ev.clientX;
};
function jl(fn,wait) {
let last = 0;
return function() {
let args = arguments;
let now = Date.now();
if (now - last > wait) {
fn.apply(this,args);
last = now;
}
}
}
