for循环执行异常排查：替换日期的循环时灵时不灵

问题描述 #

你编写的代码中，用于将文本"time"替换为文件修改日期的for循环多数时候不执行，偶尔刷新多次才生效，且console.log(datumFields[i])无输出，无报错信息。

核心原因 #

你发起了两次独立的fetch('list.json')请求，这两个请求是并行执行的，没有固定的完成顺序：

• 第一个请求负责通过appendData渲染带crdatum类的DOM元素
• 第二个请求负责获取文件修改日期并替换文本

如果第二个请求先完成，此时crdatum类的元素还未被创建，datumFields为空集合，循环自然不会执行；只有当第二个请求碰巧在第一个请求的DOM渲染完成后结束，才能找到元素并替换文本，这就是为什么偶尔刷新才生效。

另外，你两次请求同一个JSON文件，完全是冗余操作，既浪费资源又加剧了异步顺序问题。

解决方案 #

方案一：合并单次请求（推荐） #

只发起一次fetch，同时获取JSON数据和响应头，保证DOM渲染完成后再执行文本替换：

<html>
<head>
</head>
<body>
<div class="row" id="albumSet"></div>
<script>
    fetch('list.json')
        .then(function (response) {
            // 先获取修改日期头
            const lastMod = response.headers.get('Last-Modified');
            // 同步解析JSON数据并传递后续逻辑
            return response.json().then(data => ({ data, lastMod }));
        })
        .then(function ({ data, lastMod }) {
            appendData(data);
            // 此时DOM已渲染完成，执行文本替换
            const datumFields = document.getElementsByClassName('crdatum');
            for (let i = 0; i < datumFields.length; i++) {
                datumFields[i].innerHTML = lastMod.toString();
            }
        })
        .catch(function (err) {
            console.log('error: ' + err);
        });
        
    function appendData(data) {
        var mainContainer = document.getElementById('albumSet');
        let htmlStr = '';
        // 先拼接所有HTML内容，减少DOM操作次数
        for (var i = 0; i < data.length; i++) {
            htmlStr += `<div class="col">
                <div class="card shadow-sm">
                    <div class="row g-0">
                        <div class="col-md-5">
                            <img class="bd-placeholder-img card-img-top" height="400px" role="img" src="${data[i].img_link}" alt="${data[i].name}">
                        </div>
                        <div class="col-md-7">
                            <div class="card-body">
                                <h5 class="card-title">${data[i].name}</h5>
                                <a href="${data[i].link}"><button type="button" class="btn btn-sm btn-outline-secondary">View</button></a>
                                <small class="text-muted crdatum">time</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>`;
        }
        // 一次性插入DOM，提升性能
        mainContainer.innerHTML = htmlStr;
    };
</script>
</body>
</html>

方案二：强制异步执行顺序（不推荐） #

如果必须保留两次请求，可将第二个请求的逻辑放到第一个请求的DOM渲染完成后：

<script>
    fetch('list.json')
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            appendData(data);
            // 渲染完成后再发起第二个请求
            return fetch('list.json');
        })
        .then(function (response) {
            const lastMod = response.headers.get('Last-Modified');
            const datumFields = document.getElementsByClassName('crdatum');
            for (let i = 0; i < datumFields.length; i++) {
                datumFields[i].innerHTML = lastMod.toString();
            }
        })
        .catch(function (err) {
            console.log('error: ' + err);
        });
        
    // appendData函数可保留原逻辑，或优化为一次性插入DOM
</script>

额外优化提示 #

原代码中mainContainer.innerHTML += showCol会多次修改DOM，触发浏览器重排重绘，换成先拼接完整HTML字符串再一次性赋值给innerHTML，能显著提升页面渲染性能。

内容的提问来源于stack exchange，提问作者WillHoh