Anti-Shake-Implementierungsmethode in Vue3

Question

Ich habe ein Filtereingabefeld und möchte eine Liste von Elementen filtern. Die Liste ist umfangreich, daher möchte ich Antishake verwenden, um die Anwendung des Filters zu verzögern, bis der Benutzer mit der Eingabe aufhört, um die Benutzererfahrung zu verbessern. Dies ist mein Eingabefeld, das zum Filtern der Liste an filterText gebunden ist.

<input type="text" v-model="state.filterText" />

Answer 1

嗨，第一次在这里回答问题，所以请尽情纠正我的答案，我会非常感激。 我认为最漂亮、最轻量的解决方案是在全局创建一个指令，您可以在所有表单中随意使用。

首先创建带有指令的文件，例如。 debouncer.js

然后创建防抖函数

    //debouncer.js
    /*
      这是一个典型的防抖函数，它接收“callback”和等待发出事件的时间
    */
    function debouncer (fn, delay) {
        var timeoutID = null
        return function () {
          clearTimeout(timeoutID)
          var args = arguments
          var that = this
          timeoutID = setTimeout(function () {
            fn.apply(that, args)
          }, delay)
        }
      }

    /*
      此函数接收指令将设置在其中的元素和设置在其中的值
      如果值已更改，则重新绑定事件
      它具有默认超时时间为500毫秒
    */
    module.exports = function debounce(el, binding) {
      if(binding.value !== binding.oldValue) {
        el.oninput = debouncer(function(){
          el.dispatchEvent(new Event('change'))
        }, parseInt(binding.value) || 500)
      }
    }

在定义了这个文件之后，您可以转到您的main.js导入它并使用导出的函数。

    //main.js
    import { createApp } from 'vue'
    import debounce from './directives/debounce' // 导入的文件
    
    const app = createApp(App)

    //定义指令
    app.directive('debounce', (el,binding) => debounce(el,binding))

    app.mount('#app')

完成了，当您想要在输入框中使用指令时，只需像这样操作，无需导入或其他任何操作。

    //Component.vue
    <input
       :placeholder="按名称筛选"
       v-model.lazy="filter.value" v-debounce="400"
    />

如果您选择以这种方式进行操作，v-model.lazy指令非常重要，因为默认情况下，它会在输入事件上更新绑定的属性，但设置这个指令会使其等待更改事件，而这是我们在防抖函数中发出的事件。这样做将停止v-model自动更新，直到您停止输入或超时时间到期（可以在指令的值中设置）。 希望这样清楚明了。

Answer 2

我没有找到满意的解决方案，因为我想在模板中看到我的绑定，所以我决定分享我的解决方案。我编写了一个简单的防抖函数，并使用以下语法绑定行为：

setup() {
...

  function createDebounce() {
    let timeout = null;
    return function (fnc, delayMs) {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        fnc();
      }, delayMs || 500);
    };
  }

  return {
    state,
    debounce: createDebounce(),
  };
},

而模板语法如下：

    <input
      type="text"
      :value="state.filterText"
      @input="debounce(() => { state.filterText = $event.target.value })"
    />