How to implement debounce in Vue2

Question

I have a simple input box in a Vue template and I would like to use debounce more or less like this    lt input type  text  v-model  filterKey  debounce  500  gt    However the debounce property has been deprecated in Vue 2  The recommendation only says   use v-on input   3rd party debounce function    How do you correctly implement it   I ve tried to implement it using lodash  v-on input and v-model  but I am wondering if it is possible to do without the extra variable   In template    lt input type  text  v-on input  debounceInput  v-model  searchInput  gt    In script   data  function        return       searchInput          filterKey             methods      debounceInput    debounce function          this filterKey   this searchInput       500      The filterkey is then used later in computed props

User · Accepted Answer

I am using debounce NPM package and implemented like this:

<input @input="debounceInput">

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

Using lodash and the example in the question, the implementation looks like this:

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

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

User · Answer

If you are using Vue you can also use v model lazy instead of debounce but remember v model lazy will not always work as Vue limits it for custom components    For custom components you should use  value along with  change native   lt b-input  value  data   change native  data    event target value   gt  lt  b-input gt

User · Answer

If you need a very minimalistic approach to this  I made one  originally forked from vuejs-tips to also support IE  which is available here  https   www npmjs com package v-debounce   Usage    lt input v-model lazy  term  v-debounce  delay  placeholder  Search for something    gt    Then in your component    lt script gt  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        lt  script gt

User · Answer

Option 1  Re-usable  no deps - Recommended if needed more than once in your project  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  lt script gt    import  debounce  from    helpers     export default       data            return           input              debouncedInput                        watch          input  debounce function  newVal            this debouncedInput   newVal          500             lt  script gt   Codepen  Option 2  In-component  also no deps - Recommended if using once or in small project  Component vue  lt template gt       lt input type  quot text quot  v-model  quot input quot    gt   lt  template gt    lt script gt    export default       data            timeout  null          debouncedInput                computed         input            get               return this debouncedInput                    set val              if  this timeout  clearTimeout this timeout            this timeout   setTimeout      gt                this debouncedInput   val              300                               lt  script gt   Codepen

User · Answer

Assigning debounce in methods can be trouble  So instead of this      Bad methods      foo    debounce function      1000      You may try      Good created        this foo     debounce function      1000       It becomes an issue if you have multiple instances of a component - similar to the way data should be a function that returns an object  Each instance needs its own debounce function if they are supposed to act independently   Here s an example of the problem    x000D   x000D  Vue component  counter     x000D    template    lt div gt    i    lt  div gt    x000D    data  function    x000D      return   i  0    x000D       x000D    methods    x000D         DON T DO THIS x000D      increment    debounce function    x000D        this i    1  x000D         1000  x000D      x000D      x000D   x000D   x000D  new Vue   x000D    el    app   x000D    mounted      x000D      this  refs counter1 increment    x000D      this  refs counter2 increment    x000D      x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs vue 2 5 16 vue min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs lodash js 4 17 5 lodash min js  gt  lt  script gt  x000D   x000D   lt div id  app  gt  x000D     lt div gt Both should change from 0 to 1  lt  div gt  x000D     lt counter ref  counter1  gt  lt  counter gt  x000D     lt counter ref  counter2  gt  lt  counter gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

If you could move the execution of the debounce function into some class method you could use a decorator from the utils-decorators lib  npm install --save utils-decorators    import  debounce  from  utils-decorators    class SomeService       debounce 500    getData params

User · Answer

Although pretty much all answers here are already correct  if anyone is in search of a quick solution I have a directive for this  https   www npmjs com package vue-lazy-input  It applies to  input and v-model  supports custom components and DOM elements  debounce and throttle    x000D   x000D  Vue use VueLazyInput  x000D    new Vue   x000D      el    app    x000D      data     x000D        return   x000D          val  42 x000D          x000D         x000D      methods   x000D        onLazyInput e   x000D          console log e target value  x000D          x000D        x000D       x000D   lt script src  https   cdnjs cloudflare com ajax libs vue 2 5 17 vue js  gt  lt  script gt  x000D   lt script src  https   unpkg com lodash lodash min js  gt  lt  script gt  lt  -- dependency -- gt  x000D   lt script src  https   unpkg com vue-lazy-input latest  gt  lt  script gt   x000D   x000D   lt div id  app  gt  x000D     lt input type  range  v-model  val   input  onLazyInput  v-lazy-input   gt    val   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Very simple without lodash   handleScroll  function         if  this timeout         clearTimeout this timeout         this timeout   setTimeout      gt             your action        200      delay

User · Answer

Please note that I posted this answer before the accepted answer  It s not   correct  It s just a step forward from the solution in the   question  I have edited the accepted question to show both the author s implementation and the final implementation I had used      Based on comments and the linked migration document  I ve made a few changes to the code   In template    lt input type  text  v-on input  debounceInput  v-model  searchInput  gt    In script   watch      searchInput  function          this debounceInput             And the method that sets the filter key stays the same   methods      debounceInput    debounce function          this filterKey   this searchInput       500      This looks like there is one less call  just the v-model  and not the v-on input

User · Answer

I had the same problem and here is a solution that works without plugins   Since  lt input v-model  xxxx  gt  is exactly the same as    lt input    v-bind value  xxxx     v-on input  xxxx    event target value   gt     source   I figured I could set a debounce function on the assigning of xxxx in xxxx    event target value  like this   lt input    v-bind value  xxxx     v-on input  debounceSearch  event target value    gt    methods   debounceSearch val     if search timeout  clearTimeout search timeout     var that this    search timeout   setTimeout function         that xxxx   val        400

User · Answer

In case you need to apply a dynamic delay with the lodash s debounce function   props      delay  String     data       gt       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                       And the template    lt template gt               lt input type  text  v-model  search   input  valueChanged    gt            lt  template gt    NOTE  in the example above I made an example of search input which can call the API with a custom delay which is provided in props

User · Answer

public debChannel   debounce  key    gt  this remoteMethodChannelName key   200   vue-property-decorator

User · Answer

We can do with by using few lines of JS code   if typeof window LIT      undefined           clearTimeout window LIT      window LIT   setTimeout      gt  this updateTable    1000     Simple solution  Work Perfect  Hope  will be helpful for you guys

[vue.js] How to implement debounce in Vue2?

Examples related to vue.js

Examples related to vuejs2

Examples related to debouncing