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

作者: hgweb 发布时间: 2019-10-11 浏览: 161 次 编辑

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。Lodash 通过降低 arraynumberobjectsstring 等等的使用难度从而让 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 毫秒)时,消息框不会弹出。只有停下后才会消息框(相当于只执行最后一个点击行为)

原文:JS - Lodash工具库的使用详解1(使用debounce函数实现防抖)

(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);

JS Lodash工具库的使用详解系列:

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

JS - Lodash工具库的使用详解2(使用throttle函数实现节流)

JS - Lodash工具库的使用详解3(String字符串操作函数)

JS - Lodash工具库的使用详解4(Array数组函数1:查找指定元素、或索引)

JS - Lodash工具库的使用详解5(Array数组函数2:获取部分数组片段)

JS - Lodash工具库的使用详解6(Array数组函数3:移除、修改原数组内容)

JS - Lodash工具库的使用详解7(Array数组函数4:数组排序、打乱)

JS - Lodash工具库的使用详解8(Array数组函数5:数组与对象间的转换)

JS - Lodash工具库的使用详解9(Array数组函数6:如果不是数组强制转成数组)

JS - Lodash工具库的使用详解10(Array数组函数7:根据指定规则进行分组、统计)

JS - Lodash工具库的使用详解11(Array数组函数8:创建指定范围数字的数组)

JS - Lodash工具库的使用详解12(创建一个只能调用1次、n次的函数)

JS - Lodash工具库的使用详解13(创建一个对某函数结果取反的函数)

JS - Lodash工具库的使用详解14(浅拷贝,深拷贝)

JS - Lodash工具库的使用详解15(深比较,判断是否包含某属性或属性值)

JS - Lodash工具库的使用详解16(判断是否为空)

JS - Lodash工具库的使用详解17(类型检查)

JS - Lodash工具库的使用详解18(生成随机数)