Question

我在keyUp上调用searchkeyword函数。我想在快速键入新字母时取消/ clearTimeout $ emit，以便只调用几次$ emit。但是控制台会在每次搜索关键字调用时被调用/反跳。

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

Answer 1

您的方法很好，设置超时然后清除它是一种众所周知的反跳方法。 answer对此进行了描述，并使用相同的方法。

问题是您在每次调用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>

还请注意，防抖动并不一定是组件的一种方法。

每次都调用防抖功能

1 个答案: