Как реализовать debounce в Vue2?

У меня есть простое поле ввода в шаблоне Vue, и я хотел бы использовать debounce примерно так:

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

Однако это debounceсвойство устарело в Vue 2 . В рекомендации только сказано: «используйте v-on: input + стороннюю функцию debounce».

Как правильно это реализовать?

Я пытался реализовать это с помощью lodash , v-on: input и v-model , но мне интересно, можно ли обойтись без дополнительной переменной.

В шаблоне:

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

В скрипте:

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

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

Затем ключ фильтра используется в computedреквизитах.

Я использую пакет debounce NPM и реализован так:

<input @input="debounceInput">

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

Используя lodash и пример в вопросе, реализация выглядит так:

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

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

Назначение дебаунда methodsможет быть проблемой. Итак, вместо этого:

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

Вы можете попробовать:

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

Это становится проблемой, если у вас есть несколько экземпляров компонента - аналогично тому, как dataдолжна быть функция, возвращающая объект. Каждому экземпляру нужна своя собственная функция противодействия, если предполагается, что они действуют независимо.

Вот пример проблемы:

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 году

Вариант 1: многоразовый, без депс

(Рекомендуется, если требуется более одного раза в вашем проекте)

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

Вариант 2: внутрикомпонентный, также без зависимостей

(Рекомендуется при однократном использовании или в небольшом проекте)

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

  handleScroll: function() {
    if (this.timeout) 
      clearTimeout(this.timeout); 

    this.timeout = setTimeout(() => {
      // your action
    }, 200); // delay
  }

У меня была такая же проблема, и вот решение, которое работает без плагинов.

Поскольку <input v-model="xxxx">точно так же, как

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

(источник)

Я подумал, что могу установить функцию противодействия при назначении xxxx в xxxx = $event.target.value

как это

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

методы:

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

Обратите внимание, что я опубликовал этот ответ до принятого ответа. Это не так. Это всего лишь шаг вперед от решения вопроса. Я отредактировал принятый вопрос, чтобы показать как реализацию автора, так и окончательную реализацию, которую я использовал.

На основе комментариев и связанного документа по миграции я внес несколько изменений в код:

В шаблоне:

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

В скрипте:

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

И метод, устанавливающий ключ фильтра, остается прежним:

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

Похоже, на один вызов меньше (только на v-model, а не на v-on:input).

Если вам нужен очень минималистичный подход к этому, я сделал его (первоначально созданный из vuejs-tips для поддержки IE), который доступен здесь: https://www.npmjs.com/package/v-debounce

Применение:

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

Затем в вашем компоненте:

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

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

И шаблон:

<template>
  //...

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

  //...
</template>

ПРИМЕЧАНИЕ: в приведенном выше примере я сделал пример ввода для поиска, который может вызывать API с настраиваемой задержкой, которая предоставляется вprops

Хотя почти все ответы здесь уже верны, если кто-то ищет быстрое решение, у меня есть директива для этого. https://www.npmjs.com/package/vue-lazy-input

Он применяется к @input и v-model, поддерживает настраиваемые компоненты и элементы DOM, debounce и throttle.

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, вы также можете использовать его v.model.lazyвместо, debounceно помните, что v.model.lazyон не всегда будет работать, поскольку Vue ограничивает его для пользовательских компонентов.

Для пользовательских компонентов вы должны использовать :valueвместе с@change.native

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

Если бы вы могли перенести выполнение функции debounce в какой-нибудь метод класса, вы могли бы использовать декоратор из utils-decorators lib ( npm install --save utils-decorators):

import {debounce} from 'utils-decorators';

class SomeService {

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

Мы можем обойтись с помощью нескольких строк JS-кода:

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

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

Простое решение! Отличная работа! Надеюсь, вам будет полезно, ребята.

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

vue-свойство-декоратор