Как бороться с проблемами синхронизации JS асинхронных запросов？

Question

Асинхронная функция, часто вызываемая за короткое время, вызовет проблемы с синхронизацией. Мой лидер говорит мне, что в моем коде есть проблемы с синхронизацией, как я могу изменить свой код, чтобы избежать этого. Вот также код:

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 будет часто вызываться.

Предположим, что мы делаем два запроса: второй запрос возвращается первым, а первый возвращается , Второй результат перезапишет предыдущий, вызывая проблему. Поэтому я хочу использовать простой способ избежать этого.

Answer 1

Если вы хотите запретить слишком много вызовов функции и только exe c последний, используйте функцию 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;
  };

А если вы хотите обработать все вызовы, pu sh вызывает очередь и выполняет все oop в этой очереди.

Answer 2

@ 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[]);
      }
    }
  };

Answer 3

Одним из возможных решений, которое вы можете попробовать, является использование функции Debounce, чтобы вы могли контролировать и предотвращать множественные запросы. Пожалуйста, ознакомьтесь с этим постом https://medium.com/@TCAS3 / debounce-deep-dive- javascript -es6-e6f8d983b7a1 , где вы можете прочитать больше об этом и, возможно, найти хороший подход.

Это один простой подход, который вы можете попробовать. :)