Kaedah pelaksanaan anti-goncang dalam Vue3

Question

Saya mempunyai kotak input penapis dan ingin menapis senarai item. Senarainya besar, jadi saya ingin menggunakan antigoncang untuk menangguhkan penggunaan penapis sehingga pengguna berhenti menaip untuk meningkatkan pengalaman pengguna. Ini adalah kotak input saya yang terikat untuk menapisText untuk menapis senarai.

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

Answer 1

Hai, pertama kali menjawab soalan di sini, jadi sila betulkan jawapan saya, saya akan sangat berterima kasih. Saya rasa penyelesaian yang paling cantik dan ringan ialah mencipta arahan secara global yang boleh anda gunakan secara rawak dalam semua bentuk anda.

Mula-mula buat fail dengan arahan cth. debouncer.js

Kemudian cipta fungsi anti goncang

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

Selepas menentukan fail ini, anda boleh pergi ke main.js anda untuk mengimportnya dan menggunakan fungsi yang dieksport.

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

Selesai, apabila anda ingin menggunakan arahan dalam kotak input, lakukan sahaja seperti ini, tidak perlu mengimport atau apa-apa lagi.

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

Arahan v-model.lazy adalah sangat penting jika anda memilih untuk melakukannya dengan cara ini, kerana secara lalai ia akan mengemas kini sifat terikat pada acara input, tetapi menetapkan arahan ini akan membuatnya menunggu untuk acara perubahan, yang Ia adalah peristiwa yang kita pancarkan dalam fungsi anti-goncang. Melakukannya akan menghentikan model v daripada mengemas kini secara automatik sehingga anda menghentikan input atau tamat masa tamat (boleh ditetapkan dalam nilai arahan). Harapan itu menjelaskannya.

Answer 2

Saya tidak menemui penyelesaian yang memuaskan kerana saya ingin melihat binding saya dalam templat, jadi saya memutuskan untuk berkongsi penyelesaian saya. Saya menulis fungsi nyahlantun mudah dan mengikat tingkah laku menggunakan sintaks berikut:

setup() {
...

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

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

Sintaks templat adalah seperti berikut:

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