防抖在vue中的实现（转载）

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

使用场景：频繁触发事件，搜索框输入值，及滚动条触发事件

实现代码：

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

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

第一种：非立即执行：（亲测有效）

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

（就是普通function函数，不要改成箭头函数）

export function debounce(fn,timerDelay){
  var timerDelay=timerDelay||300;
  var timer;
  return function (){
     var that=this;
     var params=arguments;
    if(timer) clearTimeout(timer)
    timer=setTimeout(()=>{
      fn.apply(that,params)
     },timerDelay)
 }
}

立即执行：

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

function debounce(fn,timerDelay) {
  let timer;
  return function () {
      let that = this;
      let params = arguments;

      if (timer) clearTimeout(timer);

      let callNow = !timer;
      timer = setTimeout(() => {
          timeout = null;
      }, wait)

      if (callNow) fn.apply(that, params)
  }
}

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

/**
 * @desc 函数防抖
 * @param fn 函数
 * @param timerDelay 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
 */
function debounce(fn,timerDelay,immediate) {
  let timer;
  return function () {
      let that = this;
      let args = arguments;

      if (timer) clearTimeout(timer);
      if (immediate) {
          var callNow = !timer;
          timer = setTimeout(() => {
            timer = null;
          }, timerDelay)
          if (callNow) fn.apply(that, args)
      }
      else {
        timer = setTimeout(function(){
          fn.apply(that, args)
          }, timerDelay);
      }
  }
}

以上就是防抖

 在vue中使用

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

用法和普通函数的方法一样，fn就是方法名，直接用this.fn()调用，绑定事件使用方法一样

 

 

原文链接：防抖（vue防抖使用） - 小菟同学 - 博客园 (cnblogs.com)