Объяснение работы скрипта

Question

С помощью этого кода создается индикатор загрузки. Кто-нибудь может объяснить порядок JS-кода в функции race? Почему setTimeout стоит именно там, а не в другом месте? И еще, можете посоветовать статьи, книги, видео, объясняющие порядок работы кода в теле функции? Мне хочется писать осмысленный код, где я понимаю каждую строчку кода.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="loa"></div>
    <script src="script.js"></script>
</body>
</html>

div {
    text-align: center;
    margin-top: 100px;
}

.tim {
    width: 15px;
    height: 10px;
    background: #0000cc;
    display: inline-block;
    margin: 1px;
}

addEventListener('load', race);

let i = 0;
let d = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

function race() {
    let t = '';
    
    for (let a = 0; a <= d[i]; a++) {
        t+= "<div class='tim'></div>";
    }

    document.getElementById('loa').innerHTML = t;
    i++;
    
    if (i == d.length) {
      i = 0;
    }
    setTimeout(race, 1000);
}

Answer 1

Почему setTimeout стоит именно там, а не в другом месте?

Потому что надо сделать все вычисления, всё перевысчитать, перерисовать и только потом заново вызвать эту функцию. Было бы странно перевызывать эту функцию до каких-либо вычислений и перерисовок

Банально таймаут может сработать раньше, чем произойдут все вычисления и перерисовка, так как может браузер слабый, железка хилая, факторов, которые притормозят - много. Поэтому даже в игровых движках (например Unity3d) есть специальная функция и свойство Time.deltaTime, которая возвращает 'мс' с последнего фрейма, чтобы это значение вставить в вычисления для компенсации, чтобы у всех пользователей работало одинаково на любых железках. Поэтому угадать с таймаутом заранее просто невозможно.

БЛОГ НА HUSL

Объяснение работы скрипта

Ответы (1 шт):