### 彪哥

爱好前端

- 基础

- 组件

- 过渡&动画

- 可复用性&组合

- 工具

- 规模化

- Vuex

- 其他

  - Vue中的防抖函数封装和使用
  - 操作本地缓存

- 《Vue》笔记
- 其他

heBody
2020-02-04
目录

# Vue中的防抖函数封装和使用

# # Vue中的防抖函数封装和使用

如搜索框中，每改变一个数值就请求一次搜索接口，当快速的改变数值时并不需要多次请求接口，这就需要一个防抖函数：

    // 防抖函数
    export function debounce(func, delay) { // func 函数 delay间隔时间
      let timer
      return function (...args) {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          func.apply(this, args)
        }, delay)
      }
    }

    //使用：
    import { debounce } from '@/common/js/util'

    created() {
        /**
         * 为什么不直接在watch里面写？？？
         * 因为要做防抖处理，防止在快速输入时多次请求接口
         */
        this.$watch('query', debounce((newQuery) => {
          this.$emit('query', newQuery)
        }, 200))
      }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

### # 相关文章

防抖与节流函数
(opens new window)

编辑
(opens new window)
#Vue
上次更新: 2022/12/14, 19:36:42
Vuex
操作本地缓存

← Vuex 操作本地缓存→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式