Javascript 如何处理JS异步请求的定时问题&xFF1F；

经常在短时间内调用异步函数会导致计时问题。 我的领导告诉我，我的代码中存在计时问题，我如何修改代码以避免它。 下面是代码：

const handleSearch = async (queryName: string) => {
    const result = await getQueryTeacheNameList({ teacher_name: queryName });
    if (result.err_no === 0) {
      const { teacher_list } = result;
      if (Array.isArray(teacher_list)) {
        setOptions(teacher_list as IBackendTeacher[]);
      }
    }
  };

将频繁调用

handleSearch

函数

假设我们发出两个请求，首先返回第二个请求，然后返回第一个请求。第二个结果将覆盖前一个结果，从而导致问题。

---

因此，我想用一种简单的方法来避免它。

一种可能的解决方案是使用去盎司功能，以便控制和防止多个请求。 请查看这篇文章，在那里你可以阅读更多关于它的信息，也许可以想出一个好的方法

---

这是一种可以尝试的简单方法。：）

如果您想防止对该函数调用过多而只执行最后一个函数，请使用debounce函数作为@Dave Pastor的答案

const debounce = (fn, time) => {
  let timeout;

  return function() {
    const functionCall = () => fn.apply(this, arguments);

    clearTimeout(timeout);
    timeout = setTimeout(functionCall, time);
  }
}

let TIME_BETWEEN_CALLS = 500 // ms
// some event happen
// then call debounce
target.on("event", debounce(handleSearch, TIME_BETWEEN_CALLS));

如果只想处理第一个调用，可以为其创建一个全局标志，并在函数中首先检查该标志头：

let flag = false;
const handleSearch = async (queryName: string) => {
    if (flag) return;
    flag = true;
    const result = await getQueryTeacheNameList({ teacher_name: queryName });
    if (result.err_no === 0) {
      const { teacher_list } = result;
      if (Array.isArray(teacher_list)) {
        setOptions(teacher_list as IBackendTeacher[]);
      }
    }
    flag = false;
  };

如果您想处理所有呼叫，请将呼叫推送到队列，并在该队列上执行循环。

@thanhdx

我认为请求仍然需要发送，但我们只处理最后的结果。 我有一个解决办法：

  let lastXhr: number,
    flag = 0;
  const handleSearch = async (queryName: string) => {
    const temp = flag++;
    lastXhr = temp;
    let result = await getQueryTeacheNameList({ teacher_name: queryName });
    if (temp < lastXhr) return;
    if (result.err_no === 0) {
      const { teacher_list } = result;
      if (Array.isArray(teacher_list)) {
        setOptions(teacher_list as ec_idl.IBackendTeacher[]);
      }
    }
  };

让lastXhr:number，
flag=0；
const handleSearch=async（queryName:string）=>{
const temp=flag++；
lastXhr=温度；
让result=wait getQueryTechNameList（{teacher\u name:queryName}）；
如果（温度

如果您只需要被调用方法的最后一个结果，那么您可能需要一个

去Bounce

函数：检查lodash中的实现：这个解释我认为去Bounce不能避免计时问题，但可以防止太多调用：）是的，正确，可能不会阻止，但是使用这种方法，您至少可以限制它。：）