Ich habe ein einfaches Eingabefeld in einer Vue-Vorlage und möchte Debounce mehr oder weniger so verwenden:

<input type="text" v-model="filterKey" debounce="500">

Die debounceImmobilie wurde jedoch in Vue 2 veraltet . Die Empfehlung lautet nur: "Verwenden Sie v-on: Eingabe + Entprellungsfunktion eines Drittanbieters".

Wie setzen Sie es richtig um?

Ich habe versucht, es mit lodash , v-on: input und v-model zu implementieren , aber ich frage mich, ob es möglich ist, auf die zusätzliche Variable zu verzichten.

In Vorlage:

<input type="text" v-on:input="debounceInput" v-model="searchInput">

Im Skript:

data: function () {
  return {
    searchInput: '',
    filterKey: ''
  }
},

methods: {
  debounceInput: _.debounce(function () {
    this.filterKey = this.searchInput;
  }, 500)
}

Der Filterschlüssel wird später in computedRequisiten verwendet.

Ich verwende das Debounce- NPM-Paket und implementiere es wie folgt :

<input @input="debounceInput">

methods: {
    debounceInput: debounce(function (e) {
      this.$store.dispatch('updateInput', e.target.value)
    }, config.debouncers.default)
}

Mit lodash und dem Beispiel in der Frage sieht die Implementierung folgendermaßen aus:

<input v-on:input="debounceInput">

methods: {
  debounceInput: _.debounce(function (e) {
    this.filterKey = e.target.value;
  }, 500)
}

Das Zuweisen von Entprellen methodskann problematisch sein. Also stattdessen:

// Bad
methods: {
  foo: _.debounce(function(){}, 1000)
}

Sie können versuchen:

// Good
created () {
  this.foo = _.debounce(function(){}, 1000);
}

Es wird zu einem Problem, wenn Sie mehrere Instanzen einer Komponente haben - ähnlich wie dataeine Funktion, die ein Objekt zurückgibt. Jede Instanz benötigt eine eigene Entprellfunktion, wenn sie unabhängig agieren soll.

Hier ist ein Beispiel für das Problem:

Vue.component('counter', {
  template: '<div>{{ i }}</div>',
  data: function(){
    return { i: 0 };
  },
  methods: {
    // DON'T DO THIS
    increment: _.debounce(function(){
      this.i += 1;
    }, 1000)
  }
});


new Vue({
  el: '#app',
  mounted () {
    this.$refs.counter1.increment();
    this.$refs.counter2.increment();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>

<div id="app">
  <div>Both should change from 0 to 1:</div>
  <counter ref="counter1"></counter>
  <counter ref="counter2"></counter>
</div>

aktualisiert im Jahr 2020

Option 1: Wiederverwendbar, keine Deps

(Empfohlen bei Bedarf mehr als einmal in Ihrem Projekt)

helpers.js

export function debounce (fn, delay) {
  var timeoutID = null
  return function () {
    clearTimeout(timeoutID)
    var args = arguments
    var that = this
    timeoutID = setTimeout(function () {
      fn.apply(that, args)
    }, delay)
  }
}

Component.vue

<script>
  import {debounce} from './helpers'

  export default {
    data () {
      return {
        input: '',
        debouncedInput: ''
      }
    },
    watch: {
      input: debounce(function (newVal) {
        this.debouncedInput = newVal
      }, 500)
    }
  }
</script>

Codepen

Option 2: In-Component, keine Deps

(Empfohlen bei einmaliger Verwendung oder in kleinen Projekten)

Component.vue

<template>
    <input type="text" v-model="input" />
</template>

<script>
  export default {
    data: {
      debouncedInput: ''
    },
    computed: {
     input: {
        get() {
          return this.debouncedInput
        },
        set(val) {
          if (this.timeout) clearTimeout(this.timeout)
          this.timeout = setTimeout(() => {
            this.debouncedInput = val
          }, 300)
        }
      }
    }
  }
</script>

Codepen

Sehr einfach ohne lodash

  handleScroll: function() {
   if (this.timeout) clearTimeout(this.timeout); 
   this.timeout = setTimeout(() => {
     // your action
   }, 200);
  }

Ich hatte das gleiche Problem und hier ist eine Lösung, die ohne Plugins funktioniert.

Da <input v-model="xxxx">ist genau das gleiche wie

<input
   v-bind:value="xxxx"
   v-on:input="xxxx = $event.target.value"
>

(Quelle)

Ich dachte, ich könnte eine Entprellungsfunktion für die Zuweisung von xxxx in einstellen xxxx = $event.target.value

so was

<input
   v-bind:value="xxxx"
   v-on:input="debounceSearch($event.target.value)"
>

Methoden:

debounceSearch(val){
  if(search_timeout) clearTimeout(search_timeout);
  var that=this;
  search_timeout = setTimeout(function() {
    that.xxxx = val; 
  }, 400);
},

Bitte beachten Sie, dass ich diese Antwort vor der akzeptierten Antwort gepostet habe. Das ist nicht richtig. Es ist nur ein Schritt vorwärts von der Lösung in der Frage. Ich habe die akzeptierte Frage bearbeitet, um sowohl die Implementierung des Autors als auch die endgültige Implementierung anzuzeigen, die ich verwendet habe.

Basierend auf Kommentaren und dem verknüpften Migrationsdokument habe ich einige Änderungen am Code vorgenommen:

In Vorlage:

<input type="text" v-on:input="debounceInput" v-model="searchInput">

Im Skript:

watch: {
  searchInput: function () {
    this.debounceInput();
  }
},

Die Methode zum Festlegen des Filterschlüssels bleibt unverändert:

methods: {
  debounceInput: _.debounce(function () {
    this.filterKey = this.searchInput;
  }, 500)
}

Es sieht so aus, als gäbe es einen Anruf weniger (nur den v-modelund nicht den v-on:input).

Wenn Sie einen sehr minimalistischen Ansatz benötigen, habe ich einen erstellt (ursprünglich aus vuejs-tips gegabelt, um auch den IE zu unterstützen), der hier verfügbar ist: https://www.npmjs.com/package/v-debounce

Verwendung:

<input v-model.lazy="term" v-debounce="delay" placeholder="Search for something" />

Dann in Ihrer Komponente:

<script>
export default {
  name: 'example',
  data () {
    return {
      delay: 1000,
      term: '',
    }
  },
  watch: {
    term () {
      // Do something with search term after it debounced
      console.log(`Search term changed to ${this.term}`)
    }
  },
  directives: {
    debounce
  }
}
</script>

Falls Sie eine dynamische Verzögerung mit der debounceFunktion des lodash anwenden müssen:

props: {
  delay: String
},

data: () => ({
  search: null
}),

created () {
     this.valueChanged = debounce(function (event) {
      // Here you have access to `this`
      this.makeAPIrequest(event.target.value)
    }.bind(this), this.delay)

},

methods: {
  makeAPIrequest (newVal) {
    // ...
  }
}

Und die Vorlage:

<template>
  //...

   <input type="text" v-model="search" @input="valueChanged" />

  //...
</template>

HINWEIS: Im obigen Beispiel habe ich ein Beispiel für eine Sucheingabe erstellt, mit der die API mit einer benutzerdefinierten Verzögerung aufgerufen werden kann, die in bereitgestellt wirdprops

Obwohl so ziemlich alle Antworten hier bereits richtig sind, habe ich eine Richtlinie dafür, wenn jemand auf der Suche nach einer schnellen Lösung ist. https://www.npmjs.com/package/vue-lazy-input

Es gilt für @input und v-model, unterstützt benutzerdefinierte Komponenten und DOM-Elemente, entprellen und drosseln.

Vue.use(VueLazyInput)
  new Vue({
    el: '#app', 
    data() {
      return {
        val: 42
      }
    },
    methods:{
      onLazyInput(e){
        console.log(e.target.value)
      }
    }
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/lodash/lodash.min.js"></script><!-- dependency -->
<script src="https://unpkg.com/vue-lazy-input@latest"></script> 

<div id="app">
  <input type="range" v-model="val" @input="onLazyInput" v-lazy-input /> {{val}}
</div>

Wenn Sie Vue verwenden, können Sie auch v.model.lazyanstelle von verwenden, debounceaber denken Sie daran, v.model.lazydass dies nicht immer funktioniert, da Vue es für benutzerdefinierte Komponenten einschränkt.

Für benutzerdefinierte Komponenten sollten Sie :valuezusammen mit verwenden@change.native

<b-input :value="data" @change.native="data = $event.target.value" ></b-input>

Wenn Sie die Ausführung der Entprellungsfunktion in eine Klassenmethode verschieben könnten, könnten Sie einen Dekorator aus den utils-decorators lib ( npm install --save utils-decorators) verwenden:

import {debounce} from 'utils-decorators';

class SomeService {

  @debounce(500)
  getData(params) {
  }
}

Wir können mit wenigen Zeilen JS-Code umgehen:

if(typeof window.LIT !== 'undefined') {
      clearTimeout(window.LIT);
}

window.LIT = setTimeout(() => this.updateTable(), 1000);

Einfache Lösung! Perfekt arbeiten! Hoffe, wird für euch hilfreich sein.

 public debChannel = debounce((key) => this.remoteMethodChannelName(key), 200)

vue-property-decorator