关于vue.js:Vue中如何使用debouce防抖函数

44次阅读

共计 849 个字符，预计需要花费 3 分钟才能阅读完成。

创立一个 debounced（防抖动）函数，该函数会从上一次被调用后，提早 wait 毫秒后调用 func 办法。debounced（防抖动）函数提供一个 cancel 办法勾销提早的函数调用以及 flush 办法立刻调用。能够提供一个 options（选项）对象决定如何调用 func 办法，options.leading 与 | 或 options.trailing 决定提早前后如何触发（注：是先调用后期待还是先期待后调用）。func 调用时会传入最初一次提供给 debounced（防抖动）函数的参数。 后续调用的 debounced（防抖动）函数返回是最初一次 func 调用的后果。

Lodash `debouce` 参数

func (Function) : 要防抖动的函数。
[wait=0] (number) : 须要提早的毫秒数。
[options=] (Object) : 选项对象。
[options.leading=false] (boolean) : 指定在提早开始前调用。
[options.maxWait] (number) : 设置 func 容许被提早的最大值。

[options.trailing=true] (boolean) : 指定在提早完结后调用。

<template>
<el-input
    v-model="value"
    size="mini"
    placeholder="请输出.."
    clearable
    @keydown.enter="handleSearch"
  ></el-input>
</template>
<script>
import _ from 'lodash'
export default {data() {return { value: ''}
},
create() {this.handleSearch = _.debounce(() => {
      // 获取列表
      this.getList();}, 300);
},
beforeDestroy() {
    // 勾销该函数的防抖动调用
    this.handleSearch.cancel();},
}
</script>

正文完