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

Posted 2023-02-22

【中文标题】使用 debounce 将参数传递给方法的函数 - vue

【英文标题】：Pass an argument to method's function with debounce - vue

【发布时间】：2019-02-01 01:19:02

【问题描述】：

模板：

<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)
  

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

如何正确传递参数？

【问题讨论】：

这有帮助吗？ ***.com/a/49780382/5648253

据我所知，created() 在页面加载时触发，但我的fetchData 不仅在初始页面加载期间触发，而且在用户应用过滤器时触发。

你为什么需要那个论点0？

【参考方案1】：

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

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

要发送参数，您只需先显式包含“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”用于使它们成为可选。

警告：如果您将在单个页面上实现此组件的多个实例，请小心，由于某些初始 Vue 生命周期中的一些封装问题，不建议在 methods: 中使用您的 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;  

【参考方案2】：

我也在寻找解决方案，总的来说，这是一个工作版本，我希望它可以帮助节省一分钟:)

// Lodash or any custom function debounce
import _ from 'lodash';

const template = `
   <input v-model="textInput">
`;

export default 
    template: template,
    data: () => 
        return 
            textInput: null
        
    ,
    created: function() 
        let vue = this;

        vue.debouncedApiPatch = _.debounce(vue.apiPatch, 500);

        vue.$watch('textInput', function (val) 
            vue.debouncedApiPatch('textInput', val);
        )
    ,
    methods: 
        apiPatch: function (prop, val) 
            console.log(prop, val);
            // api async patch...
        
    

【讨论】：

这是根据official vue forum的正确方法

【参考方案3】：

安装debounce 包。

在你的组件中导入它：

import debounce from 'debounce'

通过从fetchData 中删除0 来更新模板：

<input @input="fetchData" v-model="name">

我将事件更改为@input，但它也适用于@keyup。

然后将您的功能更改为：

fetchData: debounce(e => 
  console.log('Input argument is: ' + e.target.value);
, 500)

https://codesandbox.io/s/8x6rj4lnzl (App.vue)

【讨论】：

它可以工作，但是如何在箭头函数中访问数据？ 'this' 在 fetchData 函数中不起作用。