Bir Vue şablonunda basit bir giriş kutusu var ve ben debounce az ya da böyle kullanmak istiyorum:

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

Ancak debouncemülk Vue 2'de kullanımdan kaldırıldı . Öneri sadece şunu söylüyor: "v-on: input + 3rd party debounce function" kullanın.

Doğru şekilde nasıl uygularsınız?

Lodash , v-on: giriş ve v-model kullanarak uygulamaya çalıştım , ancak ekstra değişken olmadan yapmak mümkün olup olmadığını merak ediyorum.

Şablonda:

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

Komut dosyasında:

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

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

Daha sonra filtre tuşu computedsahne kısımlarında kullanılır .

Ben debounce NPM paketi kullanıyorum ve şu şekilde uygulanır:

<input @input="debounceInput">

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

Lodash ve sorudaki örneği kullanarak , uygulama şöyle görünür:

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

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

Geri dönmeyi atamak methodssorun olabilir. Bunun yerine:

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

Deneyebilirsiniz:

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

Bir bileşenin birden çok örneğine sahipseniz sorun olur - benzer şekilde databir nesne döndüren bir işlev olmalıdır. Bağımsız olarak hareket etmeleri gerekiyorsa, her örneğin kendi geri dönme işlevine ihtiyacı vardır.

İşte sorunun bir örneği:

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>

2020'de güncellendi

Seçenek 1: Yeniden kullanılabilir, deps yok

(Projenizde birden fazla gerekiyorsa önerilir)

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

Seçenek 2: Bileşen içinde, gecikme yok

(Bir kez veya küçük projede kullanılıyorsa önerilir)

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

Lodash olmadan çok basit

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

Aynı sorunu yaşadım ve burada eklenti olmadan çalışan bir çözüm var.

Çünkü <input v-model="xxxx">tam olarak aynı

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

(kaynak)

Ben xxxx tayininde bir debounce fonksiyonu ayarlayabilirsiniz düşündüm xxxx = $event.target.value

bunun gibi

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

yöntemleri:

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

Bu cevabı kabul edilen cevaptan önce gönderdiğimi lütfen unutmayın. Bu doğru değil. Söz konusu çözümden sadece bir adım ileri. Kabul edilen soruyu hem yazarın uygulamasını hem de kullandığım son uygulamayı göstermek için düzenledim.

Yorumlara ve bağlantılı taşıma belgesine dayanarak , kodda birkaç değişiklik yaptım:

Şablonda:

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

Komut dosyasında:

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

Ve filtre anahtarını ayarlayan yöntem aynı kalır:

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

Bu daha az bir çağrı var gibi görünüyor (sadece v-model, ve değil v-on:input).

Buna çok minimalist bir yaklaşıma ihtiyacınız varsa, burada mevcut olan bir tane (aslında vuejs-tips'ten IE'yi desteklemek için çatallanmış) yaptım: https://www.npmjs.com/package/v-debounce

Kullanımı:

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

Sonra bileşeninizde:

<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>

Lodash'ın debounceişleviyle dinamik bir gecikme uygulamanız gerekiyorsa :

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

Ve şablon:

<template>
  //...

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

  //...
</template>

NOT: yukarıdaki örnekte, API'da sağlanan özel bir gecikmeyle çağırabilecek arama girişi örneği yaptımprops

Burada hemen hemen tüm cevaplar zaten doğru olmasına rağmen, kimse hızlı bir çözüm arayışı içinde ise bunun için bir direktifim var. https://www.npmjs.com/package/vue-lazy-input

@İnput ve v-model için geçerlidir, özel bileşenleri ve DOM öğelerini destekler, açılma ve gaz kelebeği.

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>

Vue kullanıyorsanız, v.model.lazybunun yerine kullanabilirsiniz debounceancak unutmayın v.model.lazy, Vue her zaman özel bileşenler için sınırlandırdığından çalışmaz.

Özel bileşenler için :valuebirlikte kullanmalısınız@change.native

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

Debounce işlevinin yürütülmesini bir sınıf yöntemine taşıyabilirseniz, utils-decorators lib ( npm install --save utils-decorators) ' den bir dekoratör kullanabilirsiniz :

import {debounce} from 'utils-decorators';

class SomeService {

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

Birkaç JS kodu satırı kullanarak yapabiliriz:

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

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

Basit bir çözüm! Mükemmel Çalış! Umarım sizin için yararlı olacaktır.

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

vue-mülk-dekoratör