Javascript - манипулирование DOM при выполнении вычислений

Question

В настоящее время я выполняю некоторые упражнения с JavaScript (проблемы Эйлера) и решил попробовать идею создания индикатора выполнения для проблем, которые используют вложенные циклы и занимают несколько секунд. Это просто изображение пустого индикатора выполнения, расположенного под полным, с функцией JavaScript, которая периодически меняет ширину полосы.

Однако это изменение не происходит до тех пор, пока все вычисления не будут завершены. JavaScript накладывает манипуляции DOM на удержание, когда он выполняет вычисления? Если это так, есть ли простой способ обойти это?

Вот код, который я запускаю.

JavaScript код:

function updateProgress(calc){ 
     var recorded_calculations = 90357988; //(pre-recorded number) 
     var percent = (calc/recorded_calculations) * 100; 
     document.getElementById("full-bar").style.width = percent + "%"; 
     if(percent == 100){ 
      return; 
     } 
     setTimeout(function(){ 
      updateProgress(calculations); 
     }, 1); 
    } 

    var calculations = 0; 

    updateProgress(calculations); 

    for(lots of increments){ 
     calculations++; 
     //Logic here 
     for(lots of increments and){ 
      calculations++; 
      //Logic here 

И CSS код:

#background-bar{ 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 1; 
    width: 100%; 
} 

#full-bar{ 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 2; 
    width: 0%; 
    overflow: hidden; 
} 

Answer 1

Пользовательский интерфейс будет блокироваться, расчет выполняется.

Недавно я ответил на очень похожий вопрос.

https://stackoverflow.com/a/37092024/4567456

То же самое относится и здесь.

Answer 2

JavaScript однопоточный. Если какой-либо другой код выполняется, когда ожидается, что ожидания ожидания будут вызваны, он будет ждать, пока это не будет завершено до того, как будет вызвана функция тайм-аута ...

Таким образом, в основном цикл for будет блокировать функцию updateProgress, пока он не будет завершается, поэтому он не очень полезен в качестве индикатора выполнения.

Большинство проблем эйлеров проекта таковы, что с эффективным алгоритмом он должен быть почти мгновен, чтобы запускать большинство проблем. Если вы создаете индикатор выполнения, чтобы отслеживать проблемы, которые занимают много времени, то это, вероятно, означает, что вы могли/должны найти лучшее решение.

Если вы хотите обновить прогресс, необходимый для вызова функции изнутри вашего цикла.

Вы можете просто назвать прогресс обновления, если (вычисления% 1000 === 0) или что-то, поэтому он не вызывает его постоянно.