Имеет ли смысл выполнять функции в обработчиках событий asyn c?

Question

Скажем, есть функция, которая выполняет сложные / длительные операции:

const somethingMoreComplexSync = value => {
  let stupidString = value;
  for (let i = 0; i < 100000000; i++) {
    stupidString = i % 2 === 0 ? stupidString + "1" : stupidString.slice(0, -1);
  }
  return stupidString;
};

(Эта функция на самом деле просто возвращает value, который был передан в качестве параметра)

Теперь представьте, что вы хотите вызвать эту функцию, как только вы введете что-то в поле ввода:

const MyComponentSync = () => {
  const handleChange = e => {
    const complexValue = somethingMoreComplexSync(e.target.value);
    console.log(complexValue);
  };

  return (
    <label>
      Sync
      <input onChange={handleChange} />
    </label>
  );
};

Таким образом, каждый раз, когда вы вводите символ, onChange будет срабатывать, таким образом, somethingMoreComplexSync будет срабатывать.

Этот вопрос здесь: Имеет ли смысл делать somethingMoreComplexSync asyn c?

Насколько я могу представить, события в любом случае называются asyn c ? (Это правда?)

См. codesandbox , которая также содержит асин c реализацию вышеуказанного.

Answer 1

Имеет ли смысл выполнять функции в обработчиках событий asyn c?

Нахождение в обработчике событий не является причиной для того, чтобы сделать код асинхронным.

Допустим, есть функция, которая выполняет сложные / длительные операции

Тогда может быть целесообразно перенести работу, которую она выполняет, в сеть. Работник или что-то подобное, чтобы снять нагрузку с главного события l oop… потому что оно долго работает, а не потому, что оно имеет какое-либо отношение к событиям.

См. Этот код и ящик, который также содержит асинхронный код c реализация вышеупомянутого.

В этом нет ничего асинхронного. Он обернут в обещания (которые являются инструментами для управления асинхронным кодом), но все еще блокируется.