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

【问题标题】：Vue.js: Run a method after a delay, but reset the delay if user input happensVue.js：延迟后运行方法，但如果用户输入发生则重置延迟
【发布时间】：2019-03-28 08:28:39
【问题描述】：

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

我觉得我会使用一个被监视的属性来完成这个，但我正在为实现而苦苦挣扎。有明显的 setTimeout 方法，但这不允许我重置计时器 - 我只会在 2 秒延迟的情况下多次调用它。

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

相关Vue脚本：

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

            }
        }
    }
</script>

【问题讨论】：

您可能想研究去抖动。 the docs中有一个很好的例子
我确实发现了 - 但它看起来好像在 between 请求之间增加了一个超时，所以第一个请求会立即运行，then a后续请求之间有 2 秒的延迟。去抖动会允许我为第一个添加延迟吗？（我承认这是我在这一点上有点完美主义者）
是的，我只是没有正确阅读文档。太棒了！
我认为Lodash's debounce function 不会立即调用函数，除非您专门将leading 选项设置为true。

标签： javascript node.js vue.js

【解决方案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）。我觉得第一个更好。可能还有更多的方法。如果有帮助，请采纳答案。

【讨论】：