之前实习的时候，我遇到了这么一个需求，搜索框实时发送请求，在做这个功能时我忽略了一个很严重的问题，我把处理请求的函数写进了input的onchange事件里，导致每多输入一个字符，就会多发一次请求。这的确是一段很糟糕的代码，因为它向服务器输送了大量的垃圾请求。
在前端开发中，我们经常遇到持续触发的函数，比如窗口的resize、搜索框实时发送请求、鼠标的move事件等。通常我们并不希望这些函数如此频繁地触发，因为这样会浪费内存资源或者短时间发送很多请求。
那么我们如何解决这些函数频繁触发的问题呢，函数节流和函数防抖就是两种很不错的方式。
频繁触发
首先我们以鼠标的move事件为例，来看一下函数频繁触发的情况。
代码如下：
<body>
<div id="div1"></div>
<script>
let num = 0,div1 = document.querySelector('#div1');
function count(){
div1.innerHTML = num++;
}
div1.onmousemove = count;
#div1{
height: 200px;
line-height: 200px;
text-align: center;
color:#fff;
background-color: lightblue;
font-size: 30px;
}
给一个div设置鼠标移入事件，我们来看看最终的效果。
可以看到，鼠标只是滑过这么一小会儿，数字从零加到了100多，说明这么短的时间内这个函数就执行了100多次。
我们试着解决一下这个问题，这里提供防抖和节流两种解决方案。
函数防抖（debounce）
所谓防抖，就是指函数触发后的n秒时间内，函数只会执行一次，如果n秒内函数又触发了，那么会重新计算函数执行的时间。
如果觉得难以理解，可以拿生活中的实例来做对比，例如进电梯，假如一个人进入电梯后，电梯会在3秒后关门，2秒之后电梯正准备关门，这时又进来了一个人，那么电梯就会再等3秒再关门。
这里我们设置一个定时器来实现函数防抖，代码如下：
function debounce(func,wait){
let timer;
return ()=>{
if(timer) clearTimeout(timer);
timer = setTimeout(func,wait);
}
}
div1.onmousemove = debounce(count,500);
我们来看一下实现的效果
可以看到，鼠标move事件触发后的0.5秒内，函数只执行了一次，这0.5秒内又触发了很多次鼠标move事件，都重新计算了函数执行的时间。
防抖虽然实现了，但这个函数还有需要完善的地方，改进后的防抖函数如下：
function debounce(func,wait){
let timer;
return ()=>{
let _this = this,args = arguments;
if(timer) clearTimeout(timer);
timer = setTimeout(()=>{
func.apply(_this,args);
},wait);
}
}
这里定义了_this和args两个变量来获取 this 和 参数，是为了让 debounce 函数最终返回的函数 this 指向不变以及依旧能接受到 event 参数。
有时候，我们的函数需要立即执行，这时我们该怎么办呢？
这里我们的思路是增加一个isImmediately参数，来处理立即执行的情况，代码如下：
function debounce(func,wait,isImmediately){
let timer;
return function(){
let _this = this,args = arguments;
if(timer) clearTimeout(timer);
if(isImmediately){ // 初始时timer为undefined，!undefined为true，立即执行
if(!timer) func.apply(_this,args);
timer = setTimeout(()=>{
// 之后再执行时timer为null，!null为true，立即执行
timer = null;
},wait)
}else{ // 非立即执行
timer = setTimeout(()=>{
func.apply(_this,args);
},wait)
}
}
}
div1.onmousemove = debounce(count,500,true);
我们来看一下实现的效果：
可以看到，事件触发时函数立即执行了，之后不管怎么触发事件，函数没有执行，鼠标不动一段时间，也就是不触发事件0.5秒后，再次触发事件，才又执行了函数。
函数节流（throttle）
所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。
我的理解是，节流会稀释函数的执行频率。这么做是为了节约资源，因为执行100次和执行10次的效果是差不多的，那么就没有必要多执行90次。拿生活中的例子来说，80fps和120fps其实都能流畅地玩游戏，只是80比120细节差一些，但大多数人不会多花很多钱购买高端设备来实现120fps，因为80已经足够了，使用120就意味着更大的硬件设备投入和能源消耗。（其实24fps人眼就不会觉得卡顿了）
这里有两种方式实现函数节流，一种是时间戳版，另一种是定时器版
// 时间戳版本节流函数
function throttle(func, wait) {
var prev = 0;
return function() {
// 记录一下函数执行时的时间
let now = Date.now();
let _this = this,args = arguments;
if (now - prev > wait) {
// 函数执行后，把之前记录的时间赋值给prev
func.apply(_this, args);
prev = now;
}
}
}
// 定时器版本节流函数
function throttle(func, wait) {
let timer;
return function() {
let _this = this,args = arguments;
if (!timer) {
timer = setTimeout(() => {
timer = null;
func.apply(_this, args);
}, wait);
}
};
}
div1.onmousemove = throttle(count,1000);
他们的实现效果如下：
可以看到，事件一直在触发，但是函数只会在每1秒内执行一次
总结
使用防抖和节流函数，可以解决很多频繁触发的问题，这两个函数封装好之后使用起来非常方便，直接调用就好。
本文实现的防抖和节流函数只是为了方便理解他们的思想，如果直接拿来使用，可能会遇到很多兼容性问题，推荐使用Lodash封装好的节流和防抖函数
附上链接
https://www.lodashjs.com/docs/4.17.5.html#debounce
