Пользовательский интерфейс не обновляется до завершения вызова функции

#javascript #html

#javascript #HTML

Вопрос:

  function handleCellClick(clickedCellEvent) {
    
      const clickedCell = clickedCellEvent.target;
      const clickedCellIndex = parseInt(clickedCell.getAttribute('data-cell-index'));
   
      clickedCell.innerHTML = currentMarker;
    
      ComputersMove();
    }
 

Может кто-нибудь сказать мне clickedCell.innerHTML = currentMarker , почему не обновляется пользовательский интерфейс при его чтении, а вместо этого ожидает завершения ComputersMove() обновления пользовательского интерфейса? ComputersMove() это дорогостоящая функция, выполнение которой может занять пару секунд.

Есть ли какие-либо способы обойти это? не уверен, что рабочие — это правильный путь?

Комментарии:

1. можете ли вы переписать ComputersMove так, чтобы это выполнялось в web worker? может быть, это даже setTimeout(ComputersMove) имело бы значение — но дорогостоящая функция всегда будет дорогостоящей, если не написано, что она не является дорогостоящей

2. Почему вы не можете поместить ComputersMove() в поток или асинхронный?

3. само по себе асинхронное перемещение компьютеров ничего не даст @RussJ

4. Вы уверены clickedCell.innerHTML = currentMarker , что эта часть работает? Попробуйте удалить ComputersMove() функцию и посмотрите, каков результат.

5. Прочитайте вопрос @HymnZzy — OP утверждает, что пользовательский интерфейс обновляется