javascript - 这是 chrome 中关于图像加载的错误吗？

Question

我的目标是在 html 中使用 style['background-image'] 加载一些图像，但是当我将我的代码放入 Ajax 时，出现了问题。
如果我使用async ajax，图像加载顺序是相反的；当我使用sync ajax 时，图像加载顺序是正常的。
特别是在chrome中出现，在firefox中正常。

html结构很简单，像这样

<div class="container">
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
</div>

当我使用sync ajax时，JS代码是这样的

function Ajax(url) {
        let xhr = new XMLHttpRequest()
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let slides = Array.from(document.querySelectorAll('.test'))
                for (let i = 1; i < 20; i++) {
                    slides[i].style['background-image'] = `url(/data/gallery/1125425/content/${i})`
                }
            }
        }
        xhr.open('get', url, false)
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
        xhr.send()
    }
    Ajax('https://api.github.com')

结果是这个

我们可以发现它是正常的，就像我们认为应该的那样

但是，当将async从false改为true时，结果是这样的。

为了显示 url 无关紧要的这种现象，我使用了 github 的公共(public) API。现在我们在网络面板中看到结果

我们可以看到最后一张图片先加载，与我们第一次尝试的顺序相反。

其实firefox是不会出现这种现象的，所以我猜是不是chrome的bug？

我已将我的代码放入 Codepen .
更新: 我以为它是由 Promise 引起的，后来我发现它不是。所以我改标题

Answer 1

调试你的代码笔，我发现任何类型的范围包装都会颠倒顺序。这个:

  let slides = Array.from(document.querySelectorAll('.test'))
  for (let i = 0; i < slides.length; i++) {
   (() => slides[i].style['background-image'] = `url(/data/gallery/1125425/content/${i})`)();
  }

还有这个:

(() => {
  let slides = Array.from(document.querySelectorAll('.test'))
  for (let i = 0; i < slides.length; i++) {
   slides[i].style['background-image'] = `url(/data/gallery/1125425/content/${i})`
  }
})();

所以我猜 Promise 与无关。

但我还要说远期订单(在我的例子中)不是严格的远期订单，它是错误的:0, 1, 2, 3, 4, 5, 10, 8, 7, 19,等等，并且这个顺序在 session 期间不会不时改变。