Как обновлять DOM в цикле с минимальной задержкой?

Question

В консоль браузера на http://localhost:8080/
вношу следующий код:

async function my() {

   document.getElementsByTagName("body")[0].innerHTML = "";     
   let p = document.createElement('pre');
   
   let cnt = 0;

   for (let i = 0; i < 10000000; i++) {
    
    let now = new Date();
    let start_sec = now.getSeconds();

    if (start_sec % 5 == 0) {
        cnt = cnt + 1;
        let dmy =  now.getDate() + "." +  (now.getMonth() + 1) + "." + now.getFullYear();
        let hms_ms = now.getHours() + ":" +  now.getMinutes() + ":" + start_sec + "__" + now.getMilliseconds();

        p.innerHTML = "{\"site\": \"site_01\", \"id\": " + cnt + ", \"data\": ["  + dmy + ", " + hms_ms  + "]}";
        document.body.append(p);
    }
    
    await sleep(1000);
   }
}

function sleep(ms) {
   return new Promise(resolve => setTimeout(resolve, ms));
}

my();

которым каждые 5 секунд обновляю время и вывожу в окно браузера, например, так:

{"site": "site_01", "id": 62, "data": [17.4.2025, 21:4:35__576]}

Код отрабатывает правильно, но при снижении времени задержки await sleep(1000);
например, на 200 ms, - уже прыгают данные id и __ms.

Как исправить код, чтобы работало на минимально возможной задержке, например до 100 ms?

Спойлер не понял как здесь сделать (для второго варианта кода):

my();
function my() {
    
    document.getElementsByTagName("body")[0].innerHTML = "";     
    let p = document.createElement('pre');
    let cnt = 0;

    (function iterate(i) {
        
        if (i < 10000000) {
        let now = new Date();
        let start_sec = now.getSeconds();

        if (start_sec % 5 == 0) {
            cnt = cnt + 1;
            let dmy =  now.getDate() + "." +  (now.getMonth() + 1) + "." + now.getFullYear();
            let hms_ms = now.getHours() + ":" +  now.getMinutes() + ":" + start_sec + "__" + now.getMilliseconds();

            p.innerHTML = "{\"site\": \"site_01\", \"id\": " + cnt + ", \"data\": ["  + dmy + ", " + hms_ms  + "]}";
            document.body.append(p);
         }
         setTimeout(function() { iterate(i + 1); }, 10);
         }
    })(0);
}

Answer 1

Этот код будет выполнять вашу функцию в начале каждой секунды:

(() => {
    document.getElementsByTagName("body")[0].innerHTML = "";     
    const p = document.createElement('pre');
    let cnt = 0;

    const startLater = f => setTimeout(f, 1000 - new Date().getMilliseconds());

    const iterate = i => {
        const now = new Date();
        let dmy =  now.getDate() + "." +  (now.getMonth() + 1) + "." + now.getFullYear();
        let hms_ms = now.getHours() + ":" +  now.getMinutes() + ":" + now.getSeconds() + "__" + now.getMilliseconds();

        p.innerHTML = "{\"site\": \"site_01\", \"id\": " + i + ", \"data\": ["  + dmy + ", " + hms_ms  + "]}";
        document.body.append(p);
        startLater(() => iterate(i + 1));
    };
    startLater(() => iterate(0));
})();

БЛОГ НА HUSL

Как обновлять DOM в цикле с минимальной задержкой?

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