关于js的防抖和节流
看例子：
当鼠标在橙色区域来回移动时
可以看到数值在不可控的快速增加，说明该函数被频繁触发。
对于这种快速连续触发和不可控的高频率触发问题，我们有 防抖(debounce) 和 节流(throttle) 这两种解决方法。
防抖（debounce）
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
防抖函数分为非立即执行版和立即执行版。
//准备工作
let num = 1;//定义一个初始值
let content = document.getElementById('content');//先获取一下
function count() {
//自增函数
content.innerHTML = num++;
};
非立即执行版：短时间内多次触发函数，只会执行最后一次，中间的不执行
//非立即执行版
function debounce(func, wait) {
let timer;
return function () {
let context = this; // 注意 this 指向
let args = arguments; // arguments中存着e
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args)
}, wait)
}
}
//使用方法
content.onmousemove = debounce(count, 1000);
立即执行版：短时间内多次触发函数，只会执行第一次，中间的不执行
//立即执行版
function debounce(func, wait) {
let timer;
return function () {
let context = this;
let args = arguments; // arguments中存着e
if (timer) clearTimeout(timer);
let callNow = !timer;
timer = setTimeout(() => {
timer = null;
}, wait)
if (callNow) func.apply(context, args);
}
}
//使用方法
content.onmousemove = debounce(count, 1000);
节流（throttle）
所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。
用一句话总结防抖和节流的区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行
节流函数主要有两种实现方法：时间戳和定时器。
时间戳版：获取上一次触发的时间再减去当前触发的时间，如果大于指定时间就会被执行，否则就不会执行
// 时间戳版
function throttle(func, wait) {
let previous = 0;
return function () {
let now = Date.now();
let context = this;
let args = arguments;
if (now - previous > wait) {
func.apply(context, args);
previous = now;
}
}
}
//使用方法
content.onmousemove = throttle(count, 1000);
定时器版：如果一直不断地触发函数，它会按照指定的时间执行函数
//定时器版
function throttle(func, wait) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(context, args)
}, wait)
}
}
}
//使用方法
content.onmousemove = throttle(count, 1000);
如有错误请指正