时间戳

首页 > 解决方案 > 使用 debounce 将参数传递给方法的函数 - vue

vue.js - 使用 debounce 将参数传递给方法的函数 - vue

问题描述

模板：

<input @keyup="fetchData(0)" v-model="name">

方法：

  methods: {
    fetchData: _.debounce(function (value) {
      console.log('Argument is: ' + value)
      axios.get(globalConfig.ORDERS_URL, {
        params: {
          limit: this.perPage,
          offset: (this.currentPage - 1) * this.perPage,
          name: this.name,
          phone: this.phone,
          from_date: this.dateOne,
          to_date: this.dateTwo
        }
      })
        .then((resp) => {
          this.req = resp.data
          // console.log(resp)
        })
        .catch((err) => {
          console.log(err)
        })
    }, 500)
  }

fetchData使用参数 0 -调用fetchData(0)，但它不会通过，因为我正在使用_.debounce. 控制台日志显示“未定义”

如何正确传递参数？

标签： vue.jsvuejs2debounce

解决方案

下面的代码没有经过检查，但我想解释更多关于 debounce 以及 Vue 中“v-on”或“@”事件的工作原理。

在您的<input>标签上，您可以<input @input="fetchData" v-model="name">按照@dziraf 的解释使用，并为额外的变量做一些额外的工作。或者 ...

要发送参数，您只需首先显式包含“EVENT”变量（在 Vue.js 事件中，它的名称是 $event），然后是您选择添加的任何变量：

<input 
  @input="fetchData($event, 'Custom Values', customVariables)"
  v-model="name"
>

现在您可以访问发送到“您的函数”或“去抖动函数”的所有变量（它只是您发送的任何函数的包装版本）：

methods: {
  fetchData: 
    _.debounce( 
      (e, customVariable1=undefined, customVariable2=undefined) => {
        console.log('Input argument is: ' + e.target.value);
      }, 500),
...

提示： 2 个 customVariables 中的“=undefined”用于使它们成为可选的。

警告：methods:如果您将在单个页面上实现此组件的多个实例，请小心，由于某些初始 Vue 生命周期挂钩期间的一些封装问题，不建议使用您的 debounce 函数。.cancel()此外，我相信当您进行其他一些用户交互并在延迟结束之前停止该功能时，如果需要，您不能调用该方法。

建议将函数保存到created()生命周期中的变量而不是method:：

created() {
  this.fetchData = _.debounce( 
    (e, customVariable1=undefined, customVariable2=undefined) => {
      console.log('Input argument is: ' + e.target.value);
    }, 500);
}

现在，您可以调用该.cancel()方法来正确地进行垃圾收集：

beforeDestroy() {
  this.fetchData.cancel();
}

或者，有一个“取消”按钮或从另一个 UI 元素调用：

<button @click="fetchData.cancel();">Cancel the Request</button>

您可以尝试此代码以查看封装中的细微差别：

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>

<div id="app">
  <div>Using debounce as a data() variable declared in created():</div>
  <create-change ref="counter1"></create-change>
  <create-change ref="counter2"></create-change>
  <create-change ref="counter3"></create-change>
  <create-change ref="counter4"></create-change>
  <br />
  <br />
  <div>Using debounce as a Method:</div>
  <method-change ref="counter5"></method-change>
  <method-change ref="counter6"></method-change>
  <method-change ref="counter7"></method-change>
  <method-change ref="counter8"></method-change>
</div>

JS

Vue.component('create-change', {

  template:
    `
      <button @click="changeContent($event,'any custom value')">
        Click to change my value: {{ i }}
      </button>
    `,

  data: function(){
    return { i: 0 };
  },

  created() {
   this.changeContent = _.debounce(function(e, val=0){
      if (val) { this.i = val } // or reference a method here
    }, 1000)
  },

});

Vue.component('method-change', {

  template: 
    `
      <button @click="changeContent($event,'any custom value')">
        Click to change my value: {{ i }}
      </button>
    `,

  data: function(){
    return { i: 0 };
  },

  methods: {

    // WARNING: Can have encapsulation issues
   changeContent: _.debounce(function(e, val=0){
      if (val) { this.i = val }
    }, 1000),

  },

});


new Vue({
  el: '#app',
  mounted () {
    this.$refs.counter1.changeContent(null,1);
    this.$refs.counter2.changeContent(null,2);
    this.$refs.counter3.changeContent(null,3);
    this.$refs.counter4.changeContent(null,4);
    this.$refs.counter5.changeContent(null,5);
    this.$refs.counter6.changeContent(null,6);
    this.$refs.counter7.changeContent(null,7);
    this.$refs.counter8.changeContent(null,8);
  }
});

CSS

#app {
  margin: 20px;
  font-size: 20px;
  font-family: Arial, sans-serif;  
}

推荐阅读