Vue - 使用Lodash实现防抖和节流

GitHub Demo 地址

在线预览

Lodash 官网

更新：对应的vue3版的demo如下：

GitHub Demo 地址

在线预览

参考：

Vue 防抖节流 详细介绍
vue 优雅的实现防抖和节流
防抖、节流的介绍
js防抖和节流的实现原理及应用场景
js防抖节流应用场景及写法
JS中的防抖

什么是防抖和节流？

函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象
是应对频繁触发事件的优化方案。

防抖（debounce）

防抖就是防止抖动，避免事件的重复触发。
防抖可以概括为触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。
n 秒后执行该事件，若在n秒后被重复触发，则重新计时
简单的说，如果某一事件被连续快速地触发多次，只会执行最后那一次。

• 实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法
• 如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟

使用场景

• input 搜索录入，用户不断录入值
• window触发resize事件
• mousemove 鼠标滑动事件
• scroll滚动条滑动请求、上拉触底加载更多
• 表单验证，按钮的提交事件

节流（throttle）

节流就是减少流量，将频繁触发的事件减少，并每隔一段时间执行。会控制事件触发的频率。所以节流会稀释函数的执行频率。
n 秒内只运行一次，若在n秒内重复触发，只有一次生效。
如果连续快速地触发多次，在规定的时间内，只触发一次。如限制1s，则1s内只执行一次，无论怎样，都在会1s内执行相应的操作。

• 实现方式：每次触发事件时，如果当前有等待执行的延时函数，则直接return
• 如果事件在规定的时间间隔内被不断的触发，则调用方法在规定时间内都会执行一次

使用场景

• 获取验证码
• 鼠标不断点击触发，mousedown(规定时间内只触发一次)
• mousemove 鼠标滑动事件
• 滚动条滑动请求、上拉触底加载更多
• 搜索、提交等按钮功能

防抖和节流之间的差别:

相同点：

• 都可以通过使用 setTimeout 实现
• 目的都是，降低回调函数的执行频率，节省计算资源

不同点：

• 防抖，是在一段连续操作结束之后，处理回调，利用 clearTimout 和 setTimeout 实现。

• 节流，是在一段连续操作中，每一段时间只执行一次，在频率较高的事件中使用来提高性能。

• 防抖用于无法预知的用户主动行为，如用户输入内容去服务端动态搜索结果。用户打字的速度等是无法预知的，具有非规律性。

• 节流可用于一些非用户主动行为或者可预知的用户主动行为，如用户滑动商品橱窗时发送埋点请求、滑动固定的高度是已知的逻辑，具有规律性。

• 防抖是关注于最后一次的事件触发，而节流则是在规定的时间里只执行一次。

• 防抖是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行

防抖和节流 utils

/**
 * 防抖  (传入所要防抖的方法/回调与延迟时间)
 * @param {Function} func
 * @param {number} delay
 * @return {*}
 */
export function debounce2(func, delay) {
  let timer = null
  // 借助闭包，使得变量timer不被回收
  return function() {
    // 保存当前环境下的实例对象，this即为引入该方法的那个组件实例对象
    const th = this
    // 保存传入参数
    const args = arguments
    // 第一次timer为null，跳过该判断，执行setTimeout()
    if (timer) {
      // 之后如果timer存在，则把上一次的销毁，也就是setTimeout()，则里面的函数执行也会抛弃
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      // apply()，改变this指向，指向正在操作的组件实例，传入参数
      func.apply(th, args)
      timer = null
    }, delay)
  }
}

/*
  由于使用闭包，使得timer不被回收，在A组件中每次调用该方法时会去判断timer是否存在，如果存在，
  表示上一次输入在等待执行fn()，期间如果继续输入，且在1s内，则会把上一次未执行的（setTimeout中的）fn()销毁，
  重新定时1s，以此来达到输入结束过1s才执行fn()，即触发事件或者发送请求。
*/

/**
 * 节流  (传入所要节流的方法/回调与延迟时间)
 * @param {Function} func
 * @param {number} delay
 * @return {*}
 */
export function throttle(func, delay) {
  let flag = true
  return function() {
    const th = this
    const args = arguments
    if (!flag) {
      // 未超过时间间隔，flag无效，不执行fn
      return false
    }
    func.apply(th, args)
    flag = false // 在时间间隔内把状态位flag设为无效（false）
    setTimeout(() => {
      flag = true // 超过时间间隔把状态位flag设为有效（true）
    }, delay)
  }
}

Lodash 安装

浏览器环境：

<script src="lodash.js"></script>

通过 npm：

$ npm i -g npm
$ npm i --save lodash

Lodash 防抖函数debounced 文档
Lodash 节流函数throttle 文档

使用Lodash实现防抖和节流

未处理时，录入文字改变就会触发一次事件，或者点击一次就会触发一次事件

处理后
录入文字使用的防抖，设置的0.5秒间隔，点击多次只在最后一次触发
点击查询按钮使用的节流，设置的3秒间隔，点击多次3秒内只会触发一次

文章来源地址https://www.toymoban.com/news/detail-427823.html

防抖关键代码

 <el-input v-model="queryParams2.name" maxlength="20" placeholder="请输入" 
 clearable @input="onChange2" @keyup.enter.native="onSearch2" />

// lodash文档： https://www.lodashjs.com/
//
// 搜索框防抖 - lodash实现
// 不要在debounce里写箭头函数，否则this的指向就是undefined，而不是Vue实例对象。
// 注意这里若是使用箭头函数的话， this为 undefined https://github.com/vue-styleguidist/vue-docgen-api/issues/23
onChange2: lodash.debounce(function() {
  // Do some things
  this.getListByKeyword()
}, 500),
getListByKeyword() {
  // 请求...
  console.log('根据关键字 请求...')
  console.log(this.queryParams2.name)
  console.log(JSON.stringify(this.queryParams2))
},

节流关键代码 - 方式1

<el-button class="spp-form-btn" size="small" type="primary" @click="onSearch2()">查询</el-button>

 // 按钮节流 - lodash实现 - 方式1
 onSearch2: lodash.throttle(function() {
   // Do some things
   this.requestList()
 }, 3000),
 requestList() {
   // 请求...
   console.log('点击搜索按钮 请求...')
   console.log(JSON.stringify(this.queryParams2))
 },

节流关键代码 - 方式2

 <el-button class="spp-form-btn" size="small" type="primary" style="width: 120px;" 
 @click="onSearch22()">查询（方式2）</el-button>

created() {
  // 按钮节流 - lodash实现 - 方式2
  this.onSearch22 = lodash.throttle(this.onSearch22, 3000)
},

requestList() {
  // 请求...
  console.log('点击搜索按钮 请求...')
  console.log(JSON.stringify(this.queryParams2))
},
// 按钮节流 - lodash实现 - 方式2
onSearch22() {
  // Do some things
  this.requestList3()
},

全部代码

<template>

  <div class="spp-theme-body spp-theme-pad">
  
    <h1 style="margin:10px 0px 30px;">防抖与节流</h1>
    
    <div> 未处理前 </div>
    <el-form :inline="true" size="small" :model="queryParams" class="spp-form-search spp-theme-top">
      <el-form-item>
        <span class="spp-form-label" style="width:80px">
          <i class="icon" /><i class="label">名称:</i>
        </span>
        <el-input v-model="queryParams.name" maxlength="20" placeholder="请输入" clearable @input="onChange" @keyup.enter.native="onSearch" />
      </el-form-item>
      <el-form-item>
        <el-button class="spp-form-btn" size="small" type="primary" @click="onSearch()">查询</el-button>
      </el-form-item>
    </el-form>

    <div class="spp-theme-top"> lodash实现 - 搜索框防抖（0.5秒） / 点击按钮节流（3秒内） </div>
    <el-form :inline="true" size="small" :model="queryParams2" class="spp-form-search spp-theme-top">
      <el-form-item>
        <span class="spp-form-label" style="width:80px">
          <i class="icon" /><i class="label">名称:</i>
        </span>
        <el-input v-model="queryParams2.name" maxlength="20" placeholder="请输入" clearable @input="onChange2" @keyup.enter.native="onSearch2" />
      </el-form-item>
      <el-form-item>
        <el-button class="spp-form-btn" size="small" type="primary" @click="onSearch2()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button class="spp-form-btn" size="small" type="primary" style="width: 120px;" @click="onSearch22()">查询（方式2）</el-button>
      </el-form-item>
    </el-form>

    <div class="spp-theme-top"> utils实现 - 搜索框防抖（0.5秒） / 点击按钮节流（3秒内） </div>
    <el-form :inline="true" size="small" :model="queryParams2" class="spp-form-search spp-theme-top">
      <el-form-item>
        <span class="spp-form-label" style="width:80px">
          <i class="icon" /><i class="label">名称:</i>
        </span>
        <el-input v-model="queryParams3.name" maxlength="20" placeholder="请输入" clearable @input="onChange3" @keyup.enter.native="onSearch3" />
      </el-form-item>
      <el-form-item>
        <el-button class="spp-form-btn" size="small" type="primary" @click="onSearch3()">查询</el-button>
      </el-form-item>
    </el-form>

  </div>

</template>

<script>
import lodash from 'lodash'
import { debounce2, throttle } from '@/utils/index'

export default {
  components: {},
  data() {
    return {
      tableHeight: 170,
      tableLoading: false,
      tableData: [],
      queryParams: {
        name: '',
        page: 1,
        limit: this.pageGroup.size
      },
      queryParams2: {
        name: '',
        page: 1,
        limit: this.pageGroup.size
      },
      queryParams3: {
        name: '',
        page: 1,
        limit: this.pageGroup.size
      }
    }
  },
  created() {
    // 按钮节流 - lodash实现 - 方式2
    this.onSearch22 = lodash.throttle(this.onSearch22, 3000)
  },
  mounted() {},
  methods: {
    onChange(val) {
      console.log(val)
    },
    onSearch() {
      console.log('点击搜索按钮 请求...')
      console.log(JSON.stringify(this.queryParams))
    },
    // lodash文档： https://www.lodashjs.com/
    //
    // 搜索框防抖 - lodash实现
    // 不要在debounce里写箭头函数，否则this的指向就是undefined，而不是Vue实例对象。
    // 注意这里若是使用箭头函数的话， this为 undefined https://github.com/vue-styleguidist/vue-docgen-api/issues/23
    onChange2: lodash.debounce(function() {
      // Do some things
      this.getListByKeyword()
    }, 500),
    getListByKeyword() {
      // 请求...
      console.log('根据关键字 请求...')
      console.log(this.queryParams2.name)
      console.log(JSON.stringify(this.queryParams2))
    },
    // 按钮节流 - lodash实现 - 方式1
    onSearch2: lodash.throttle(function() {
      // Do some things
      this.requestList()
    }, 3000),
    requestList() {
      // 请求...
      console.log('点击搜索按钮 请求...')
      console.log(JSON.stringify(this.queryParams2))
    },
    // 按钮节流 - lodash实现 - 方式2
    onSearch22() {
      // Do some things
      this.requestList3()
    },
    // 防抖
    // 项目工具类
    // 如果需要加参数，则在function空的形参列表里加入
    onChange3: debounce2(function(val) {
      console.log('录入的文字', val)
      // Do some things
      this.getListByKeyword3()
    }, 500),
    getListByKeyword3() {
      // 请求...
      console.log('根据关键字 请求...')
      console.log(this.queryParams3.name)
      console.log(JSON.stringify(this.queryParams3))
    },
    onSearch3: throttle(function() {
      // Do some things
      this.requestList3()
    }, 3000),
    requestList3() {
      // 请求...
      console.log('点击搜索按钮 请求...')
      console.log(JSON.stringify(this.queryParams3))
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input__icon:after {
  height: auto;
}
</style>

到了这里，关于Vue - 使用Lodash实现防抖和节流的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！