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:

Answer 1

updated in 2020

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

Codepen

---

Option 2: In-component, also no deps

(Recommended if using once or in small project)

Component.vue

Codepen