防抖（vue防抖使用）

防抖

多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行

使用场景

频繁触发事件，搜索框输入值，及滚动条触发事件

实现代码

1.为了我们方便使用防抖我们需要重复书写同样代码，可以封装一个方法utils.js

2.防抖一共有两个版本一种是立即执行一种是非立即执行

第一种：非立即执行：
非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

 1 export function debounce(fn,timerDelay){
 2   var timerDelay=timerDelay||300;
 3   var timer;
 4   return function (){
 5      var that=this;
 6      var params=arguments;
 7     if(timer) clearTimeout(timer)
 8     timer=setTimeout(()=>{
 9       fn.apply(that,params)
10      },timerDelay)
11  }
12 }

第二种 ：立即执行：
立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。

 1 function debounce(fn,timerDelay) {
 2   let timer;
 3   return function () {
 4       let that = this;
 5       let params = arguments;
 6 
 7       if (timer) clearTimeout(timer);
 8 
 9       let callNow = !timer;
10       timer = setTimeout(() => {
11           timeout = null;
12       }, wait)
13 
14       if (callNow) fn.apply(that, params)
15   }
16 }

如果给他们封装成一个方法那么需要一个开关来选择立即执行和非立即执行

1 /**
 2  * @desc 函数防抖
 3  * @param fn 函数
 4  * @param timerDelay 延迟执行毫秒数
 5  * @param immediate true 表立即执行，false 表非立即执行
 6  */
 7 function debounce(fn,timerDelay,immediate) {
 8   let timer;
 9   return function () {
10       let that = this;
11       let args = arguments;
12 
13       if (timer) clearTimeout(timer);
14       if (immediate) {
15           var callNow = !timer;
16           timer = setTimeout(() => {
17             timer = null;
18           }, timerDelay)
19           if (callNow) fn.apply(that, args)
20       }
21       else {
22         timer = setTimeout(function(){
23           fn.apply(that, args)
24           }, timerDelay);
25       }
26   }
27 }

在vue中使用

import { debounce } from "src/utils/utils";
method:{
  fn: debounce(function() {
     //逻辑代码
    }, 2000),
}