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

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

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

Вариант 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: {
        timeout: null,
        debouncedInput: ''
    },
    computed: {
     input: {
        get() {
          return this.debouncedInput
        },
        set(val) {
          if (this.timeout) clearTimeout(this.timeout)
          this.timeout = setTimeout(() => {
            this.debouncedInput = val
          }, 300)
        }
      }
    }
  }
</script>

Codepen

Назначение debounce в 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>

Очень просто без 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);
},

Если вам нужен очень минималистичный подход к этому, я сделал его (изначально созданный на основе 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>

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

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

В шаблоне:

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

Если вам нужно применить динамическую задержку с функцией debounce lodash:

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>

Чтобы создать отлаженные методы, вы можете использовать вычисленные, таким образом, они не будут совместно использоваться несколькими экземплярами вашего компонента:

<template>
  <input @input="handleInputDebounced">
<template>

<script>
import debounce from 'lodash.debouce';

export default {
  props: {
    timeout: {
      type: Number,
      default: 200,
    },
  },
  methods: {
    handleInput(event) {
      // input handling logic
    },
  },
  computed: {
    handleInputDebounced() {
      return debounce(this.handleInput, this.timeout);
    },
  },
}
</script>

Вы также можете заставить его работать с неконтролируемым v-model:

<template>
  <input v-model="debouncedModel">
<template>

<script>
import debounce from 'lodash.debouce';

export default {
  props: {
    value: String,
    timeout: {
      type: Number,
      default: 200,
    },
  },
  methods: {
    updateValue(value) {
      this.$emit('input', value);
    },
  },
  computed: {
    updateValueDebounced() {
      return debounce(this.updateValue, this.timeout);
    },
    debouncedModel: {
      get() { return this.value; },
      set(value) { this.updateValueDebounced(value); }
    },
  },
}
</script>

Если вы используете Vue, вы также можете использовать v.model.lazy вместо debounce, но помните, что v.model.lazy не всегда будет работать, поскольку Vue ограничивает его для пользовательских компонентов.

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

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

1 Краткая версия с использованием функции стрелки, со значением задержки по умолчанию

файл: debounce.js в примере: (импортировать debounce из '../../utils/debounce')

export default function (callback, delay=300) {
    let timeout = null
    return (...args) => {
        clearTimeout(timeout)
        const context = this
        timeout = setTimeout(() => callback.apply(context, args), delay)
    }
}

2 Вариант смешивания

файл: debounceMixin.js

export default {
  methods: {
    debounce(func, delay=300) {
      let debounceTimer;
      return function() {
       // console.log("debouncing call..");
        const context = this;
        const args = arguments;
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => func.apply(context, args), delay);
        // console.log("..done");
      };
    }
  }
};

Используйте в vueComponent:

<script>
  import debounceMixin from "../mixins/debounceMixin";
  export default {
   mixins: [debounceMixin],
        data() {
            return {
                isUserIdValid: false,
            };
        },
        mounted() {
        this.isUserIdValid = this.debounce(this.checkUserIdValid, 1000);
        },
    methods: {
        isUserIdValid(id){
        // logic
        }
  }
</script>

другой вариант, пример

Устранение неполадок при поиске Vue

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

import {debounce} from 'utils-decorators';

class SomeService {

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

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

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