防抖（vue防抖使用）

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

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

实现代码：

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

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

第一种：非立即执行：

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

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)
  }
}

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

/**
 * 1.防抖节流
 * 作用：事件频繁调用，规定事件调用一次
 * 场景：重复点击按钮频繁发送axios请求，造成服务器压力，使用防抖可以在规定时间内发送一次请求，减缓服务器压力
 * @param {function} fn 执行函数
 * @param {number} delay 等待时间
 * @param {boolean} immediate 是否立即执行,true多次操作执行第一次操作，false多次操作执行最后一次操作
 */

export function debounce (fn, delay, immediate = false) {
  let timeout; // 局部全局变量
  return function (...args) {
    let that = this
    if (timeout) clearTimeout(timeout) // 清除计时器，但是timeout本身还在，只是不会在执行
    if (immediate) { // 总是执行第一次操作
      let callNow = !timeout // 第一次为true
      // 多次操作，timeout初始化，多次触发只有当delay等待时间结束timeout才为空
      timeout = setTimeout(function () {
        timeout = null
      }, delay)
      // 第一次为true, 执行
      if (callNow) fn.apply(that, args)
    } else { // 总是执行最后一次操作
      timeout = setTimeout(function () {
        fn.apply(that, args)
      }, delay)
    }
  }
}

 

以上就是防抖

 在vue中使用

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