Lodash _.debounce 在 VueJS 事件中不起作用答案

【问题标题】：Lodash _.debounce doesn't work in VueJS eventLodash _.debounce 在 VueJS 事件中不起作用
【发布时间】：2020-03-26 16:01:00
【问题描述】：

我正在尝试在我的过滤器中使用debounce。我不想在每次输入文本更改时都发送请求，我宁愿等一秒钟。

问题是如果我使用 _.debounce，过滤器似乎根本没有被调用。

  <div class="md-form">
        <i class="fas fa-search prefix"></i>
        <input type="text" class="form-control" v-model="filter.fulltext" @input="runFilter" id="x">
        <label for="x">Fulltext vyhľadávanie</label>
  </div>

var app = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        data: { ....
        methods:{
            runFilter() {
                var self = this;

                _.debounce(function () {
                    self.records_page = 1;
                    self.loadRecords();
                    self.loadMarkers();
                 }, 1000)

               },
               ....

你知道为什么一秒钟后没有调用它吗？

【问题讨论】：

标签： javascript vue.js lodash

【解决方案1】：

_.debounce() 返回一个带闭包的函数，所以你必须找到一个地方来存储去抖函数。通常，您可以对函数进行去抖，并将去抖函数放在 created 钩子中的 this 上。

created() {
   this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
}

就像它在官方文档中所做的那样。 https://vuejs.org/v2/guide/computed.html

【讨论】：