Javascript 为什么html修改要等待循环结束？

为什么我可以在循环结束之前看到警报，而其他与html相关的命令却在等待结束？ 如何在主流程中更改它？请求持续时间长

由于某些原因，我需要同步请求

$（'.task progress div'）。每个（函数（）{
设div=$（这个），
id=$（this.data（'id'）；
div.append（“…”）；
警报（“启动”+id）；
div.css（'color'，'red'）；
设xhr=newXMLHttpRequest（）；
xhr.open（'get'，'/#'+id，false）；
xhr.onload=函数（）{
div.text（'xhr.responseText'）；
警报（'结束'+id）；
};
xhr.send（）；
})

234242
234543

jQuery有一个ajax方法，可以使这一切变得更简单，并并行发出请求

$('.task-progress div').each(function() {
  let div = $(this), id = div.data('id');
  div.load('/somePath/' + id);    
});

---

注意：带有

#

的url不适合发出远程请求

首先要回答为什么

警报（）

会立即发生，但DOM更新似乎会延迟到代码运行完成：当您在其中存储某个内容时，DOM实际上会立即更新，但是浏览器不会重新呈现受影响的DOM元素，直到所有JavaScript完成执行，即当您的函数返回时

如果浏览器在每次DOM操作后立即重新呈现页面，您将看到每个单独的更改，例如在代码

$div.append（'…'）.css（'color'，'red'）中您可能会看到“…”在变为红色之前出现片刻

alert（）
是一种非常特殊的情况。它不使用DOM，也不依赖浏览器重新呈现页面
alert（）
在现代JavaScript代码中应该很少或永远不会使用

如果需要发出多个请求并逐个排序，正确的方法是使用异步XHR并在前一个请求完成后发送每个请求。它可能看起来像这样：

function updateAllProgress() {
    const $divs = $('.task-progress div');
    let index = 0;

    function updateNextProgress() {
        if( index >= $divs.length ) return;  // done

        const $div = $($divs[index]);
        const id = $div.data('id');
        $div.append('...').css('color', 'red');
        $.get( '/#'+id, function( data ) {
            $div.text( data );
            ++index;
            updateNextProgress();
        });
    }
}

如果需要，您还可以在请求之间添加一个短暂的延迟，只需更改
updateNextProgress（）在结束时调用
setTimeout（updateNextProgress，1000）等

还请注意charlietfl的注意，URL中的
“#”
可能不是正确的用法。通常情况下，您希望看到在这样的URL中使用
？”
。
您使用的是同步XHR。您正在经历的正是使同步请求成为一个坏主意的坏行为。如果服务器速度慢，这更是不使用同步XHR的原因。也许您应该只对所有数据发出一个请求，并更改此操作的逻辑谢谢！好主意。而#仅作为jsfiddle示例