JS - Lodash工具库的使用详解1（使用debounce函数实现防抖）

2019-09-27 发布：hangge 阅读：3626

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。同时其在 npm 每天下载量都超过 200 万，足以证明了它受欢迎的程度。

一、使用 debounce 函数实现防抖

1，安装配置

（1）这里假设我们需要在 Vue.js 项目里使用 Lodash，首先进入项目文件夹，执行如下命令使用 npm 安装 lodash：

npm i --save lodash

（2）然后项目代码中引入使用即可：

import _ from 'lodash'

2，debounce 防抖

debounce 函数原型如下。它会创建一个 debounced（防抖动）函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法。

_.debounce(func, [wait=0], [options={}])

（1）debounce 常用来过滤高频产生的方法调用：

比如我们要实现一个支持实时搜索的输入框，为了避免每输入一个字符就发送一个请求而造成资源浪费。我们可以借助 debounce来实现防抖，当用户连续输入文字时不发送请求，只有输入完毕后等待一定时间不再输入时才发送请求。

（2）options 有如下三个可选参数配置：

leading：指定在延迟开始前是否执行 func（默认为 false）。
maxWait：设置 func 允许被延迟的最大值。
trailing：指定在延迟结束后是否执行 func（默认为 true）。

3，使用样例

（1）效果图

点击按钮界面会弹出一个消息框。
但如果我们连续点击按钮（间隔小于 500 毫秒）时，消息框不会弹出。只有停下后才会消息框（相当于只执行最后一个点击行为）

（2）样例代码

<template>
  <div id="test">
    <button @click="btnClick">点击</button>
  </div>
</template>

<script>

import _ from 'lodash';

export default {
  name: 'Test',
  data () {
    return {
    }
  },
  methods:{
    //按钮点击
    btnClick() {
      //显示消息
      this.showAlert('欢迎访问hangge.com');
    },
    // 显示消息时增加防抖（500毫秒延迟）
    showAlert: _.debounce(function(message){
      alert(message);
    }, 500)
  },
  // 页面创建时自动加载数据
  created() {
  }
}
</script>

（3）上面代码也可改成如下形式，效果是一样的：

<template>
  <div id="test">
    <button @click="showAlert('欢迎访问hangge.com')">点击</button>
  </div>
</template>

<script>

import _ from 'lodash';

export default {
  name: 'Test',
  data () {
    return {
    }
  },
  methods:{
    // 显示消息时增加防抖（500毫秒延迟）
    showAlert: _.debounce(function(message){
      alert(message);
    }, 500)
  },
  // 页面创建时自动加载数据
  created() {
  }
}
</script>

附：debounce 其它的一些应用场景

Lodash 的官方在线手册（点击跳转）中还列举了一些 debounce 函数的使用场景，具体如下：

// 避免窗口在变动时出现昂贵的计算开销。
jQuery(window).on('resize', _.debounce(calculateLayout, 150));
 
// 当点击时 `sendMail` 随后就被调用。
jQuery(element).on('click', _.debounce(sendMail, 300, {
  'leading': true,
  'trailing': false
}));
 
// 确保 `batchLog` 调用1次之后，1秒内会被触发。
var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
var source = new EventSource('/stream');
jQuery(source).on('message', debounced);
 
// 取消一个 trailing 的防抖动调用
jQuery(window).on('popstate', debounced.cancel);