Подождите x секунд для нового испускаемого значения перед запуском функции
У меня есть дочерний компонент, который выдает значение, а в родительском я выполняю вызов axios с этим значением каждый раз, когда оно выдается. Моя проблема в том, что я хочу инициировать вызов axios только в том случае, если за x мс (или секунд) ребенок не выдал другое значение, чтобы уменьшить количество вызовов, которые я делаю.
Код здесь:
<script>
import axios from "axios";
import DataTable from './DataTable.vue';
export default {
name: 'Test',
data() {
return {
gamertags: [],
// Utils
timeout: 500,
delay: 500
}
},
methods: {
// API calls
async getGamerTags(string='') {
const path = `http://localhost:5000/gamertags?string=${string}`
await axios.get(path)
.then((res) => {
this.gamertags = res.data;
})
.catch((error) => {
console.error(error);
});
},
// DataTable
handleFilters(filters) {
clearTimeout(this.timeout);
this.timeout = setTimeout(this.getGamerTags(filters.find(o => o.field == "playerGamerTag").filter), this.delay);
}
}
components: {
DataTable
}
};
</script>
<template>
<DataTable
@filters = "handleFilters"
/>
</template>
Заранее спасибо.
setTimeout ожидает функцию в качестве первого аргумента. Вы не передаете функцию, вы вызываете свою функцию и передаете ее результат в setTimeout
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Было бы лучше понять проблему и вариант использования, если вы также добавите код. но как я понял проблема в двух направлениях
- если вы используете внутренний ввод и запускаете событие
@changed, вы можете добавить@change.lazyэто не запускать при каждом изменении. - второе решение - использовать
setTimeout(function,delayInMs)внутри родителя
@change.lazy это не то, что я хочу, я хочу что-то вроде этого поста: stackoverflow.com/questions/1909441/… И я добавил код в пост
Что вам нужно, так это разоблачение. Вот пример:
var timeout, delay = 3000;
function func1() {
clearTimeout(timeout);
timeout = setTimeout(function(){
alert("3000 ms inactivity");
}, delay);
}<input type = "text" oninput = "func1()">При излучении просто вызовите func1(), и если новых излучений не будет через 3000 мс, функция по таймауту будет выполнена.
Я добавил свой код, и ваше решение, похоже, не работает. Как будто функция срабатывает каждый раз, когда выдается значение, и через 500 мс у меня появляется эта ошибка Uncaught SyntaxError: Unexpected identifier
@hitaton, я добавил фрагмент в свой ответ, и он работает нормально.
@hitaton, кроме того, синтаксическая ошибка может быть вызвана отсутствующей или ненужной запятой, точкой с запятой или другими идентификаторами в исходном коде.
Итак, я решил, что должен изменить свой код на this.timeout = setTimeout(function() {this.getGamerTags(filters.find(o => o.field == "playerGamerTag").filter);}, this.delay);, но с этим у меня ошибка TypeError: this.getGamerTags is not a function
Хорошо, плохо, я просто не знал, как использовать функцию setTimeout с параметрами. Я написал ответ на свой пост. Спасибо большое.
Просто изменив функцию handleFilters на:
handleFilters(filters) {
clearTimeout(this.timeout);
this.timeout = setTimeout(
this.getGamerTags,
this.delay,
filters.find(o => o.field == "playerGamerTag").filter
);
},
проблема решена.
Отказ от дребезга — это то, что вы ищете lodash.com/docs/4.17.15#debounce.