How does the function return the variable assigned by the asynchronous method within the function (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 = () => {
            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[loaderror ]
            return imgList;
        }
        console.log(render())
        //  ["", "", "", "", "", ""]
        
        //  ["./img.png", "", "./load.gif", "", "", ""]

I have asked similar questions before, but they are not satisfied and there is no need!


learn about single threading and asynchronism first, or it's useless to give you an answer


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);
});

your requirement can only be achieved through asynchronous callbacks. If you want to make fake Synchronize, you have to use async + await

.

your needs are a little strange, little brother

 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); //
    });
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bffbe7-311e7.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bffbe7-311e7.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?