Vue.js：延迟后运行一个方法，但如果发生用户输入则重置延迟

Question

假设我有一个表单，它根据用户输入从 API 检索和显示信息。当用户输入查询时（为了简单起见，假设他们正在更改每页的结果数量），组件应该做出反应并加载新数据。我想给用户一个缓冲区 - 比方说，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);

解决方案2

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