Как сделать "отправить форму после того, как пользователь перестал печатать" в vuejs2 - PullRequest
Новая
       81

Как сделать "отправить форму после того, как пользователь перестал печатать" в vuejs2

0 голосов
/ 13 января 2020

У меня есть поисковый модуль, в котором: когда пользователь перестает печатать, он должен искать имя .

Как мне кажется, решение состоит в том, чтобы сделать timeout, когда пользователь keyup. ссылка 

<input type="text" @keyup="textSearch($event)">

textSearch(e){
    var timer;
    clearTimeout(timer);

    timer = setTimeout(() => {
        alert('searching...');
    }, 2500);
}

Код все работал, проблема в , почему, когда я набираю 3 символа всего за 1 секунду, он выдает 3 предупреждения? Я ожидаю, что должно быть одно всплывающее окно, так как оно ждет 2,5 секунды.

Что-то не так с кодом? Нужна помощь, господа

Ответы [ 4 ]

1 голос
/ 13 января 2020

Что я делаю, чтобы решить эту проблему, так это то, что я беру переменную timer в Vue данных, потому что, когда textSearch метод, вызываемый внутри функции таймера, переназначается. 

data () {
    return {
        timer: null
    }
}


textSearch(e){
    clearTimeout(this.timer);

    this.timer = setTimeout(() => {
        alert('searching...');
    }, 2500);
}

Я думаю, что это решит вашу проблему.

1 голос
/ 13 января 2020

Вот решение:

setTimeout нормально - в качестве альтернативы, вы можете использовать debounce Vue -debounce 

<input v-debounce:400ms="myFn" type="text" />

<script>
export default {
  methods: {
    myFn(val) {
      console.log(val) // => The value of the input
    }
  }
}
</script>
1 голос
/ 13 января 2020

Если я правильно понимаю вашу проблему, тайм-аут, который вы очищаете при каждом запуске textsearch(), - это не тот, который вы создали в последний раз, а тот, который вы только что объявили с var timer. Я бы посоветовал хранить переменную таймера в ваших свойствах данных, чтобы clearTimeout сбрасывал правильное время ожидания.

Примерно так: 

data: {
    timer: undefined
},
methods: {
    textSearch(e){
      clearTimeout(this.timer)

      this.timer = setTimeout(() => {
          alert('searching...')
      }, 2500)
    }
}

Рабочая скрипка вашего кода с моими изменениями:

https://jsfiddle.net/MapletoneMartin/yjxfsehz/2/

Удачи!

1 голос
/ 13 января 2020

Другое решение для этого - использовать watch вместо event-keyup. Сначала необходимо создать model. 

<input type="text" v-model="searchTxt">

data(){
    return{
        searchTxt: ''
    }
},

watch: {
    searchTxt: function(val) {
        if (!this.awaitingSearch) {
          setTimeout(() => {
            alert('searching');
            alert(this.searchTxt); //alert value

            this.awaitingSearch = false;
          }, 2500); // 2.5 sec delay
        }
        this.awaitingSearch = true;
    }
}

Дополнительная информация

...