这段代码在 Javascript 中是什么意思

Question

我遇到了以下代码：

let timeoutHandler;

clearTimeout(timeoutHandler);
timeoutHandler = setTimeout(() => {...});

这是一种过度简化，因为原始代码包含在 Vue 应用程序中，如下所示：

public handleMultiSelectInput(value): void {
            if (value === "") {
              return;
            }

            clearTimeout(this.inputTimeoutHandler);
            this.inputTimeoutHandler = setTimeout(() => {
                axios.get(`${this.endpoint}?filter[${this.filterName}]=${value}`)
                  .then(response => {
                      console.log(response);
                  })
            }, 400);
        }

这是否意味着这是某种廉价的去抖动功能？ 有人可以解释一下这到底是什么意思。

Answer 1

是的，它是一个 debounce 函数，即在我们实际运行某个函数之前，我们在最后一个事件之后等待一些时间过去。

实际上有许多不同的场景，我们可能希望在 Web 应用程序内部对某些事件进行去抖动。

您上面发布的那个似乎处理文本输入。 所以它对输入进行去抖动，这意味着它不会在用户开始在输入中输入某个字符时立即获取该端点，而是要等到用户停止在该输入中输入任何内容。 看起来它将等待 400 毫秒，然后执行网络请求。

您发布的代码有点难以阅读和理解，但是是的，这就是它的想法。

我会像这样提取网络请求：

const fetchData = async searchTerm => {
    const response = await axios.get(`${this.endpoint}?filter[${this.filterName}]=${value}`);
  console.log(response.data);
}

let timeoutHandler;
const onInput = event => {
    if (timeoutHandler) {
    clearTimeout(timeoutHandler);
  }
  timeoutHandler = setTimeout(() => {
    fetchData(event.target.value);
  }, 400);
}

当然，我只是使用 vanilla JS，上面的内容在 Vuejs 应用程序中，我不熟悉用户正在接触的 API。 此外，通过隐藏一些逻辑，即使我上面提供的内容也可以变得更加清晰。