vue 使用 lodash 防抖

vue 使用防抖

之前有一篇博文是说防抖的，忘记写在哪里了，但是发现上一篇写的有点问题，那是自己写的，我懒得找了，然后今天这一篇呢，不是自己写了，然后使用的那个 lodash ，这个做前端应该比较熟悉，直接是他提供了一个防抖的方法使用就可以了，这里就简单说一下使用。

lodash 官网

官网：https://lodash.com/

中文文档：https://www.lodashjs.com/

防抖 API：https://www.lodashjs.com/docs/lodash.debounce#_debouncefunc-wait0-options

安装

这里只说防抖，所以说呢，只安装防抖。

安装的话，一条命令就可以了。

npm i --save lodash.debounce
1

引入

安装完成之后直接在需要使用的页面引入就可以了。

import debounce from 'lodash.debounce'
1

使用

使用的时候有好几种方式哈，我这边就写一种，是什么时候什么场景都可以用的，其他简单的按照简单的来。

什么场景呢，假如说我有一个界面，我拖动浏览器边边，界面变了之后就需要向后台请求数据渲染，这个情况下呢，我不想一变就请求，我想让他每隔一秒钟之后请求新的，不然不停的请求后台不大好。

OK，代码很简单，就这个样子就可以了。

在 vue 里面的 created 声明周期或者是 mounted 生命周期中写：

this.debouncedCallback = debounce(function () {
  // 请求后台的代码...
}, 1000)
1
2
3

然后在调用的时候就直接 ：

this.debouncedCallback()
1

就可以了，他会自动帮我们实现防抖功能，就这样。

这个 lodash 当中有很多方法，防抖啊，节流啊，深浅拷贝啊之类的都有，如果需要可以根据自己的需要使用，行了，今天就到这儿，拜了个拜！