如何让这段代码按照1，2，3，4，5，6输出？

let src = [["1.jpg","2.jpg","3.jpg"],["4.jpg","5.jpg","6.jpg"]];
        for(let i=0;i<src.length;i++){
            for(let  j=0;j<src[i].length;j++){
                let img = new Image();
                img.src = src[i][j];
                img.onload = function(){
                     console.log(img.src);
                     document.body.appendChild(img);
               }
            }
        }

有时结果是乱序的。

let src = [["1.jpg","2.jpg","3.jpg"],["4.jpg","5.jpg","6.jpg"]];
        for(let i=0;i<src.length;i++){
            for(let  j=0;j<src[i].length;j++){
                let img = new Image();
                img.src = src[i][j];
                //把document.body.appendChild(img);放onload外面就可以了
                document.body.appendChild(img);
                img.onload = function(){
               }
            }
        }

因为是异步导致的，可以用async和await改造一下

你直接定义6个img标签，把值设置上去肯定不会乱。

let src = [["1.jpg","2.jpg","3.jpg"],["4.jpg","5.jpg","6.jpg"]];
//扁平化数组 变成  ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg"]
let imgList = src.flat(2) 

//方式一  不保证顺序  并发 谁先响应先处理谁
async function test1(){
  return await Promise.all(
    imgList.map(imgSrc => {
      return new Promise((resolve) => {
        let img = new Image();
        img.onload = () => resolve(img)
        img.onerror = () => resolve(`地址：${imgSrc}，加载失败`)
        img.src = imgSrc;
      })
    })
  )
}

//方式二 保证顺序 一个响应完结后再执行下一个
async function test2(){
  let arr = []
  for(let imgSrc of imgList){
    let res = await new Promise((resolve) => {
      let img = new Image();
      img.onload = () => resolve(img)
      img.onerror = () => resolve(`地址：${imgSrc}，加载失败`)
      img.src = imgSrc;
    })
    arr.push(res)
  }
  return arr
}


async function run(){
  let timeLabel1 = '方式1 耗时'
  console.time(timeLabel1)
  let case1 = await test1()
  console.log(case1)
  console.timeEnd(timeLabel1)

  let timeLabel2 = '方式2 耗时'
  console.time(timeLabel2)
  let case2 = await test2()
  console.log(case2)
  console.timeEnd(timeLabel2)
  console.log('done....')
}

run()

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

由于图片的加载是异步的，因此在完成加载的时间可能与开始加载时间不一致导致输出的结果不一致。可以使用async/await进行异步处理。或者先输出再加载