防抖和节流的理解与实现

防抖和节流是性能优化问题，也是测试小姐姐一直乐此不疲喜欢提的问题。严格来说每个项目都需要防抖或节流。今天就来好好了解一下：

防抖

1.含义

简单理解就是：用户多次触发事件，在用户一直触发事件中，事件不会执行，只有在用户停止触发事件一段时间之后（自己设定的时间）再执行这个事件一次。

2.实现

调用：

2.1在ts项目中合适的防抖函数

调用

3.场景

就比如一个表单页面的保存按钮，如果一直点点点，接口会一直调，这条数据会保存了好几遍，结果就是会生成好几条id不一样内容一样的数据。用防抖就会有效解决。

4.原理

用户每一次触发事件都会延迟执行，在设置延迟定时器执之前都会把上一次延迟定时器清除，最终只有用户连续触发这个事件的间隔时间超出我们设置的参数ms毫秒之后,该事件才会触发一次

节流

1.含义

简单理解就是：用户多次触发事件，在用户一直触发事件过程中事件会每间隔一段时间执行一次，会执行多次。

2.实现

/**
 * 节流函数
 * @param {Function} fn 需要节流处理的函数
 * @param {Number} delay 节流时间
 * @returns 
 */
export function throttle(fn,delay=500){
  let preTime = 0
  return function(){
    let now = Date.now()
    if(now-preTime>delay){
      fn.apply(this,arguments)
      preTime = now
    }
  }
}

3.场景

在下拉滚动请求接口时不想让接口请求的太频繁就可以用节流。

4.原理

用户每一次触发事件都会设置一个延迟定时器，但是如果已经设置了延迟定时器就会等上一次延迟定时器执行之后才会开启下一个定时器，这样用户一直触发事件，事件会每间隔一段时间执行一次

总结

节流和防抖本质上都是控制事件执行的频率，但是触发事件的时机本质上有区别，防抖是在用户多次触发事件，当用户停止触发事件，将事件执行一次；节流是用户多次触发事件，会在多次触发的过程中，间隔执行事件。