[ VUE ] Почему не работает lodash.debounce?

Question

[Сева]

props: {
  delay: Number,
}

watch: {
    q: _.debounce(
      function() {
        console.log(this.delay); // значение на месте
        if (this.q.length >= this.minLength) {
          this.autocomplete();
        }
      }, this.delay // - не работает, если захардкодить значение - работает
    )
  },

Что я делаю не так? Спасибо.

Answer 1

[Александр]

Методы инициализируются в контексте window, у которого нет вашего window.delay, а если и есть, то не тот.
У вас q создается через вызов метода debounce lodash.
Потом уже Vue биндит инстанс компонента.

Еще один пропаченый вариант ( на codepen ) из документации

<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.js"></script>
<div id="debounce-search-demo">
  <input v-model="searchQuery" placeholder="Type something">
  <strong>{{ searchIndicator }}</strong>
</div>

new Vue({
  el: '#debounce-search-demo',
  data: {
    searchQuery: '',
    searchQueryIsDirty: false,
    isCalculating: false,
    delay: 5000
  },
  computed: {
    searchIndicator() {
      if (this.isCalculating) {
        return '⟳ Fetching new results'
      } else if (this.searchQueryIsDirty) {
        return '... Typing'
      } else {
        return '✓ Done'
      }
    },
    debouncedSearch() {
      return _.debounce(this.search, this.delay)
    }
  },
  watch: {
    searchQuery: function () {
      this.searchQueryIsDirty = true
      this.expensiveOperation()
    }
  },
  methods: {
    // This is where the debounce actually belongs.
    expensiveOperation: function(){
      return this.debouncedSearch()
    },
    search() {   
      this.isCalculating = true
      setTimeout(() => {
        this.isCalculating = false
        this.searchQueryIsDirty = false
      }, 10000)
    },
  }
})

Answer 2

[Ilya]

вместо function() {} сделайте () => {} для передачи контекста

Comments

[Сева]

Неа. Так TypeError: _this.q is undefined
Я не понимаю, внутри функции это значение есть, в console.log же выводится.

[Ilya]

конечно у вас _this.q is undefined та как надо писать не _this а this

[Сева]

Ilya, у меня все правильно написано, это vue где-то под капотом перезаписывает очевидно

Answer 3

[Evgeny Kulakov]

Наверное как-то так:

watch: {
  q(v) { _.debounce(() => {
          console.log(this.delay)
            if (v.length >= this.minLength) {
              this.autocomplete();
            }
         }, this.delay)
      }
  },

Comments

[Сева]

Не работает вообще.

Answer 4

[lavezzi1]

<template>
  <button @click="throttledMethod()">Click me as fast as you can!</button>
</template>

<script>
import _ from 'lodash'

export default {
  methods: {
    throttledMethod: _.debounce(() => {
      console.log('I only get fired once every two seconds, max!')
    }, 2000)
  }
}
</script>

Comments

[Сева]

И что это? Говорю же, если захардкодить - работает.

[lavezzi1]

Сева, это эталонный пример того как должно быть. попробуй переписать его под свои нужды

[Сева]

Как только я вместо значения ставлю переменную - перестает работать. В этом весь вопрос.

Answer 5

[Андрей Климаш]

{
  methods: {
    handler (value) {
      console.log(value)
    }
  },
  computed: {
    debouncedHandler() {
      return _.debounce(this.handler, this.delay)
    }
  }
}