函数的防抖和节流

 一、防抖

1、什么是函数的防抖

概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。

 2、为什么需要防抖

前端开发过程中，有一些事件，常见的例如，onresize，scroll，mousemove ,mousehover 等，会被频繁触发（短时间内多次触发），不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函 数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会浪费计算机资源，还会降低 程序运行速度，甚至造成浏览器卡死、崩溃。

3、函数防抖的要点

函数防抖的要点，是需要一个 setTimeout 来辅助实现，延迟运行需要执行的代码。如果方法多次触发，则把上次记录的延迟执行代码用 clearTimeout 清掉，重新开始计时。若计时期间事件没有被重新触发，等延迟时间计时完毕，则执行目标代码。

 4、函数防抖的实现

HTML代码部分

```HTML
<input type="text" placeholder="请输入搜索信息" id="keyword">
```

js代码部分

```jsx
document.querySelector('#keyword')
.addEventListener('input',debounce(requestNetWork,2000))
function debounce(fn,wait){
let timeout=null;
return args=>{
if(timeout) clearTimeout(timeout)
timeout=setTimeout(fn,wait)
}
}
function requestNetWork(){
console.log('发送网络请求...');
}
```

5、函数防抖的使用场景

- 搜索框搜索输入。只需用户最后一次输入完，再发送请求；
- 用户名、手机号、邮箱输入验证；
- 浏览器窗口大小改变后，只需窗口调整完后，再执行 resize 事件中的代码，防止重复渲染

二、函数节流

 1、什么是函数节流

概念： 限制一个函数在一定时间内只能执行一次。

```
举个栗子:坐火车或地铁，过安检的时候，在一定时间（例如10秒）内，只允许一个乘客通过安检入口，以配合安检人员完成安检工作。上例中，每10秒内，仅允许一位乘客通过，分析可知，“函数节流”的要点在于，在 一定时间 之内，限制 一个动作 只 执行一次
```

 2、函数节流的要点

主要实现思路就是通过 setTimeout 定时器，通过设置延时时间，在第一次调用时，创建定时器，先设定一个变量，然后把定时器赋值给这个变量，再写入需要执行的函数。第二次执行这个函数时，会判断变量是否true，是则返回。当第一次的定时器执行完函数最后会设定变量为false。那么下次判断变量时则为false，函数会依次运行。目的在于在一定的时间内，保证多次函数的请求只执行最后一次调用。

 3、函数节流的实现

```jsx
<button id="submit">提交</button>
```

```jsx
document.querySelector('#submit')
.addEventListener('click',throttle(requestNetWork,2000))
function throttle(fn,wait){
let timer=null;
return ()=>{
if(!timer){
timer=setTimeout(() => {
fn();
timer=null;
}, wait);
}
}
}
function requestNetWork(){
console.log('发送网络请求...');
}
```

 4、节流的应用场景

- 懒加载、滚动加载、加载更多或监听滚动条位置；
- 百度搜索框，搜索联想功能；
- 防止高频点击提交，防止表单重复提交；