主页 / 问题 / 1610512
Accepted
Alex
Asked:2025-04-18 02:51:05 +0000 UTC2025-04-18 02:51:05 +0000 UTC

如何以最小的延迟循环更新 DOM？

  • 772

我在浏览器控制台中输入以下代码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 毫秒）时，数据id和__ms。

如何修复代码以使其以尽可能小的延迟工作，例如最多 100 毫秒？

剧透我不明白如何在这里做到这一点（对于代码的第二个版本）：

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);
}
javascript

1 个回答

  1. Best Answer

    此代码将在每秒开始时执行您的功能：

    (() => {
    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));
})();
    • 1

相关问题