javascript - Vue.js:延迟后运行方法，但如果发生用户输入则重置延迟

Question

假设我有一个表单可以根据用户输入从 API 中检索和显示信息。当用户输入他们的查询时(为简单起见，假设他们正在更改每页的结果数)，组件应该使用react并加载新数据。我想给用户一个缓冲区——比方说，2 秒。如果他们输入他们的输入，并且 2 秒后没有任何新输入，该组件将执行 axios 请求。但是，如果在那段时间内输入了更多内容，“超时”将重置为 2 秒。

我觉得我会使用监视属性来完成此操作，但在实现过程中遇到困难。有明显的 setTimeout 方法，但它不允许我重置计时器 - 我只是多次调用它并延迟 2 秒。

如何使用 Vue.js 等待用户输入，然后等待 2 秒不活动(在该组件上)，然后执行 axios 请求？

相关Vue模板:

<template>
    <input
        type="number"
        v-model.number="perPage" />    
</template>

相关Vue脚本:

<script>
    export default {
        data: function () {
            return {
                perPage: 25,
            }
        },
        methods: {
            myAxiosCall() {

            }
        }
    }
</script>

Answer 1

正如您所指出的，您正在使用 setTimeout() 方法。

解决方案 1 -- 在你的文本观察器中执行此操作

将setTimeout的结果保存在一个变量中，需要取消时使用clearTimeout。像这样

let x = setTimeout(functionName, time);
//to clear -- when user starts typing clear the previously created timeouts
clearTimeout(x);

方案二

使用去抖动(导入 lodash )。我觉得第一个更好。可能有更多的方法。如果有帮助，请采纳答案。