函数内如何返回 函数内部异步方法赋值的变量(2)？

Question

 const list = [
        "./img.png",//本地存在可加载成功
        "//be-fe.github.io/static/images/iSlider-card/10.jpg",//加载图片失败
        "./load.gif",//本地存在可加载成功
        "//be-fe.github.io/static/images/iSlider-card/12.jpg",//加载图片失败
        null,//无图片
        "//be-fe.github.io/static/images/iSlider-card/17.jpg",//加载图片失败
        ];    
        const placeholder = '默认占位图';
        const loadError = '加载失败图';
        const render = () => {
            let endSrc = placeholder;     

            let imgList = [];
            list.forEach((ele) => {
                if(ele){
                    const image = new Image();
                    image.src = ele;
                    image.onload = () => {
                        endSrc = ele;
                    };
                    image.onerror = () => {
                        endSrc = loadError;
                    };
                }
                imgList.push(endSrc);
            });
            // 我期望取得html 、onload 和onerror后的值[load和error事件是异步的 所以目前获取不到]
            return imgList;
        }
        console.log(render())
        // 目前输出 ["默认占位图", "默认占位图", "默认占位图", "默认占位图", "默认占位图", "默认占位图"]
        
        // 期望输出 ["./img.png", "加载失败图", "./load.gif", "加载失败图", "默认占位图", "加载失败图"]

之前问过类似的问题 但是不满足也无需求！！

Answer 1

先了解单线程和异步吧，不然给你答案也无用

Answer 2

const list = [
  './img.png',//本地存在可加载成功
  '//be-fe.github.io/static/images/iSlider-card/10.jpg',//加载图片失败
  './load.gif',//本地存在可加载成功
  '//be-fe.github.io/static/images/iSlider-card/12.jpg',//加载图片失败
  null,//无图片
  '//be-fe.github.io/static/images/iSlider-card/17.jpg',//加载图片失败
];
const placeholder = '默认占位图';
const loadError = '加载失败图';
const render = callback => {
  let endSrc = placeholder;
  let imgList = [];
  list.forEach((ele) => {
    if (ele) {
      const image = new Image();
      image.src = ele;
      image.onload = () => {
        imgList.push(ele);
        if (imgList.length === list.length) {
          callback(imgList);
        }
      };
      image.onerror = () => {
        imgList.push(loadError);
        if (imgList.length === list.length) {
          callback(imgList);
        }
      };
    } else {
      imgList.push(endSrc);
      if (imgList.length === list.length) {
        callback(imgList);
      }
    }
  });
};

render(imgList => {
  console.log(imgList);
});

你这需求只能通过异步回调来实现。 想做伪同步得用上async+await

Answer 3

你这需求有点奇怪啊,小老弟

 var list = [
      "./img.png",//本地存在可加载成功
      "//be-fe.github.io/static/images/iSlider-card/10.jpg",//加载图片失败
      "./load.gif",//本地存在可加载成功
      "//be-fe.github.io/static/images/iSlider-card/12.jpg",//加载图片失败
      null,//无图片
      "//be-fe.github.io/static/images/iSlider-card/17.jpg",//加载图片失败
    ];
    var render = res => {
      console.time('s1');
      var arr = []; //图片状态
      function callback() {
        var status = []; //文字状态
        if (arr.length == list.length) {
          arr = arr.sort((a, b) => {
            return a.idx > b.idx ? 1 : -1;
          });
          arr.map(data => {
            status.push(data.status);
          });
          console.timeEnd('s1');
          res(status);
        }
      }
      list.forEach((n, idx) => {
        var def = '默认占位图';
        var err = '加载失败图';
        if (n) {
          var image = new Image();
          image.src = n;
          document.getElementById('dataImage').appendChild(image); //插入dom
          image.onload = function (e) {
            arr.push({
              idx: idx, //下标
              src: n,   //图片地址
              status: n  
            });
            callback();
          }
          image.onerror = function (e) {
            arr.push({
              idx: idx,
              src: n,
              status: err //文字状态
            });
            callback();
            image.onerror = null; //再次加载失败
          }
        } else {
          arr.push({
            idx: idx,
            src: '',
            status: def
          });
          callback();
        }
      });
    }
    render(res => {
      console.log(res); //返回数据
    });