JS函数防抖和函数节流及其使用场景

1、为什么会使用到函数防抖和函数节流

我们在平时代码的开发过程中，会有很多场景会频繁触发事件，比如说搜索框实时发请求，onmousemove, resize, onscroll等等，有些时候，我们并不想频繁触发事件，这时候就可以用到函数防抖和函数节流。

2、什么是函数防抖和函数节流?

函数防抖：如果一个事件被频繁执行多次，并且触发的时间间隔过短，则防抖函数可以使得对应的事件处理函数，只执行最后触发的一次。函数防抖可以把多个顺序的调用合并成一次。

函数节流：如果一个事件被频繁触发多次，节流函数可以按照固定的频率去执行相应的事件处理方法。函数节流保证一个事件一定事件内只能执行一次。

函数防抖（debounce）

单位时间内，频繁触发事件，只会触发最后一次

经典应用场景 ： 输入框输入事件

减少触发输入的频率，提高代码性能

函数节流  (throttle)

函数节流 : 单位时间内，频繁触发事件，只会触发一次

经典应用场景 ：降低高频事件触发频率

滚动条事件：onscroll 鼠标移动：onmousemove

函数防抖流程 ：

(1) 声明全局变量记录本次触发时间

(2) 每一次触发事件, 获取当前时间  

(3) 判断 当前时间-上一次触发时间>=节流间隔时间

(4) 存储本次触发事件，用于下一次判断

3、代码

函数防抖

//函数防抖使用场景：【永远在执行最后一次】  回到顶部࿰