Question

假设我有一个基于用户输入从API检索和显示信息的表单。当用户输入查询时（为简单起见，假设他们正在更改每页结果的数量），组件应做出反应并加载新数据。我想给用户一个缓冲区-假设2秒。如果他们输入了他们的输入，并且在2秒钟内没有任何新输入，则组件将执行axios请求。但是，如果在这段时间内输入了更多的输入，则“超时”将重置为2秒。

我觉得我会使用受监视的属性来完成此操作，但是在实现方面却遇到了困难。有一种很明显的setTimeout方法，但是不允许我重置计时器-我会多次调用它，但要延迟2秒。

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

相关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）。我发现第一个更好。可能还有更多方法。如果有帮助，请接受答案。

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

1 个答案: