функция debounce вызывается каждый раз - PullRequest
Новая
       6

функция debounce вызывается каждый раз

0 голосов
/ 26 апреля 2019

Я вызываю функцию searchkeyword для keyUp.Я хочу отменить / clearTimeout $ emit, когда новая буква набирается быстро, так что вызывается только несколько раз $ emit.Но консоль вызывается / debounce при каждом вызове searchkeyword. 

  methods: {
    searchKeyword : function() {
      var scope = this;
      (this.debounce(function(){
        scope.$emit("search-keyword", scope.keyword);
        console.log("Called");
      },350))();
    },
    debounce: function (func, delay) {
        var timeout;
        return function() {
          const context = this;
          const args = arguments;
          clearTimeout(timeout);
          timeout = setTimeout(() => func.apply(context, args), delay);
        }
      }
    }

1 Ответ

2 голосов
/ 26 апреля 2019

Вы подходите хорошо, устанавливаете таймаут, а затем очищаете его, это хорошо известный подход к устранению неполадок.Этот ответ описывает его и использует тот же метод.

Проблема заключается в том, что вы создаете новую отлаженную функцию при каждом вызове searchKeayword, а затем выполняете ее сразу.

Вместо этого вам нужно напрямую передать дебагованную функцию. 

const debounce = (fn, delay) => {
  let timeout;

  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(_ => fn.apply(context, args), delay);
  };
};

new Vue({
  el: '#root',
  name: "App",
  data: _ => ({ called: 0 }),
  methods: {
    doSomething: debounce(function() {
      this.called += 1;
    }, 2000)
  },
  template: `
    <div>
      <button v-on:click='doSomething'>Do Something</button>
      I've been called {{ called }} times
    </div>
  `
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='root'></div>

Также обратите внимание, что debounce не обязательно должен быть методом вашего компонента.

...