防抖和节流（jQuery）

节流会不断触发，但是每隔一段时间才会执行一次，而防抖仅在最后一次触发，也是执行间隔时间内触发的最后一次。

1.防抖

将动作写进定时器中，限制触发时间，如果在时间间隔内连续触发动作，会造成排队现象，所以在下一次动作触发之前先将定时器清除，也就是说如果不及时清除定时器，那么就会依次执行触发的所有事件。

基础防抖

应用

我们在执行搜索操作的时候，每次输入都会触发键盘事件，但是实际情况下这是不合理的。这个时候我们就需要进行防抖的应用。

①首先我们需要获取到搜索框，并且给它添加键盘弹起事件

获取标签添加事件

②关键字就是搜索框中的value值

let keyword = $(this).val();

③在定时器中发起请求，获取数据，拼接字符串，将结果添加到ul中

事件流程

④在下一次请求发起之前，先将上一次请求执行完才可以，也就是只有在1秒以后才可以继续触发请求

防抖代码

⑤优化，在搜索框中没有输入值时就不要显示ul

优化

2.节流

以鼠标移动事件为例

①声明一个充当开关的变量，与定时器名称使用同一个名，默认值为null。

let timer = null; // 充当开关的角色（null、1）

②给document添加鼠标移动事件

事件部署

③还是将代码写进定时器中，但是这次需要有一个限制条件，由于每次触发定时器定时器都会返回一个自然数，从1开始计数，而我们将变量值为null定义为执行下次事件的条件，所以在核心代码执行完毕之后，我们需要手动将值改为null

节流操作