Vue.js Watch Metodunda Delay Nasıl Verilir?

Bu gün sizlere Elasticsearch te karşıma çıkan. Kullanıcının her yazdığı inputu araması yerine, geçikmeli şekilde arayarak requestlerden nasıl tasarruf ettiğimizi anlatıcam.

... Buraya View kodunuz yer alıyor
<script>
import debounce from 'debounce';

export default {
  data: () => ({
    return {
//**Burası Elasticsearch için arama kelimeniz
      elasticSearchAranicakKelime: ""
    }
  }),
  mounted(){
    this.kelimeAramasiYap = debounce(this.kelimeAramasiYap, 500);
  },
  watch: {
    this.elasticSearchAranicakKelime(value){
       this.kelimeAramasiYap(value);
    }
  },
  methods: {
    kelimeAramasiYap(value){
    /* ... Burada Elasticsearch Requestinizi Atabilirsiniz */
    }
  }
}
</script>

Debounce aslında javascriptte change eventlarının her seferinde triger olmasını geçiktiren bir tasarım kalıbı. Bu yüzden bende Vue.js içinde bu çözümü kullarak basit bir şekilde yapılacak olan request sayısını azalttım.

yarn add debounce 

Yazarak projenize paketinizi ekleyin ardından yukarıdaki örnekte verdiğim gibi. Debounce fonksiyonunu kullanabilirsiniz.

Kaynak Vue.js

Cevap Ver

Lütfen yorumunuzu yazınız!
Lütfen isminizi buraya giriniz