debounce在vue 中的使用

发表于 | 分类于 | 评论数： | 阅读次数：

什么是 debounce

n. 防反跳
按键防反跳（Debounce）为什么要去抖动呢？机械按键在按下时，并非按下就接触的很好，尤其是有簧片的机械开关，会在接触的瞬间反复的开合多次，直到开关状态完全改变。大学时候做过电子实验的都知道,按键的时候需要加上消抖函数.

debounce 的使用场景

  • 调整页面宽度 ,resize 时,避免频繁渲染导致页面卡顿
  • 输入框输入搜索🔍条件,为了优化体验,没有设置搜索按钮,但是尽量减少 api 调用
  • …

JavaScript 实现 debounce

JavaScript 实现 debounce 利用了闭包的概念.

1
2
3
4
5
6
7
function debounce(fn, wait) {
  let timeout = null;
  return function() {
    if (timeout !== null) clearTimeout(timeout);
    timeout = setTimeout(fn, wait);
  };
}

上面的函数接收一个函数和一个延时秒数.
其中let timeout = null;只有在第一次调用 debounce 函数时定义.
实现如果没有计时器,则新建一个计时器.已经存在计时器的情况下,会销毁当前存在的计时器,并重新创建一个计时器.
这样就可以达到消抖的效果.例如,用户在输入框进行输入时,设置了一个 1000ms 的延时函数,那么在用户输入完毕以后才会像后端发起查询请求,可以减少大量的网路请求.

debounce 在 vue 中的使用

1
2
3
4
5
6
7
8
9
10
//utils.js
function debounce(fn, wait) {
  let timeout = null;
  return function() {
    if (timeout !== null) clearTimeout(timeout);
    timeout = setTimeout(fn, wait);
  };
}

export {  debounce };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// app.vue
import { debounce } from "./../utils/utils";

//在 vue 中的 created 声明周期中,添加对数据的监听
//而不是在 watch 中调用
created() {

    this.$watch(
      "filter",
      debounce(() => {
        this.getList();
      }, 500)
    );
    

  }
mounted:{
    getList(){
        //your code here
    }
}
thank u !