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

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)样例代码

点击

import _ from 'lodash';

export default {

name: 'Test',

data () {

return {

}

},

methods:{

//按钮点击

btnClick() {

//显示消息

this.showAlert('欢迎访问hangge.com');

},

// 显示消息时增加防抖(500毫秒延迟)

showAlert: _.debounce(function(message){

alert(message);

}, 500)

},

// 页面创建时自动加载数据

created() {

}

}

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

点击

import _ from 'lodash';

export default {

name: 'Test',

data () {

return {

}

},

methods:{

// 显示消息时增加防抖(500毫秒延迟)

showAlert: _.debounce(function(message){

alert(message);

}, 500)

},

// 页面创建时自动加载数据

created() {

}

}

附：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);