如何在vue3中实现去抖动

Question

我有一个过滤器输入字段，想过滤一个项目列表。该列表很大，所以我想使用 debounce 来延迟应用过滤器，直到用户停止输入以改善用户体验。这是我的输入字段，它绑定到用于过滤列表的 filterText。

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

Answer 1

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

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

Answer 2

<template>
    <input type="text" :value="name" @input="test" />
    <span>{{ name }}</span>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
function debounce<T> (fn: T, wait: number) {
  let timer: ReturnType<typeof setTimeout>
  return (event: Event) => {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      if (typeof fn === 'function') {
        fn(event)
      }
    }, wait)
  }
}

export default defineComponent({
  setup () {
    const name = ref('test')
    function setInputValue (event: Event) {
      const target = event.target as HTMLInputElement
      name.value = target.value
    }
    const test = debounce(setInputValue, 1000)
    return { name, test }
  }
})
</script>

Answer 3

嗨，第一次在这里回答问题，请尽可能多地纠正我的答案，我将不胜感激。我认为最漂亮和最轻便的解决方案是在全局范围内创建一个指令，您可以在所有表单中使用任意多的指令。

您首先使用您的指令创建文件，例如。 debouncer.js

然后您创建去抖动函数

    //debouncer.js
    /*
      This is the typical debouncer function that receives
      the "callback" and the time it will wait to emit the event
    */
    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)
        }
      }

    /*
      this function receives the element where the directive
      will be set in and also the value set in it
      if the value has changed then it will rebind the event
      it has a default timeout of 500 milliseconds
    */
    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' // file being imported
    
    const app = createApp(App)

    //defining the directive
    app.directive('debounce', (el,binding) => debounce(el,binding))

    app.mount('#app')

它完成了，当你想在输入上使用指令时，你只需像这样做，没有导入或任何东西。

    //Component.vue
    <input
       :placeholder="filter by name"
       v-model.lazy="filter.value" v-debounce="400"
    />

如果您选择这样做，v-model.lazy 指令很重要，因为默认情况下它会在输入事件上更新您的绑定属性，但设置它会使其等待取而代之的是更改事件，这是我们在 debounce 函数中发出的事件。这样做将停止 v-model 自我更新，直到您停止写入或超时用完（您可以在指令的值中设置）。我希望这是可以理解的。

Answer 4

使用 Lodash，您有一个更简单的解决方案：

<template>
    <input type="text" :value="name" @input="onInput" />
    <span>{{ name }}</span>
</template>

<script>
import debounce from "lodash/debounce"
export default {
  setup () {
    const onInput = debounce(() => {
      console.log('debug')
    }, 500)
    return { onInput }
  }
}
</script>

Answer 5

<input @input="updateValue"/>

const updateValue = (event) => {
  const timeoutId = window.setTimeout(() => {}, 0);
  for (let id = timeoutId; id >= 0; id -= 1) {
    window.clearTimeout(id);
  }

  setTimeout(() => {
    console.log(event.target.value)
  }, 500);
};

你可以试试这个

Answer 6

这是一个 Lodash 和脚本设置语法的示例，使用观察器触发去抖动的 api 调用：

<script setup>
import { ref, watch } from 'vue'
import debounce from 'lodash.debounce'

const searchTerms = ref('')

const getFilteredResults = async () => {
  try {
    console.log('filter changed')
    // make axios call here using searchTerms.value
  } catch (err) {
    throw new Error(`Problem filtering results: ${err}.`)
  }
}

const debouncedFilter = debounce(getFilteredResults, 250) // 250ms delay

watch(() => searchTerms.value, debouncedFilter)    
</script>

<template>
    <input v-model="searchTerms" />
</template>

如何在vue3中实现去抖动

How to implement debounce in vue3

vue.js

vuejs3

debounce