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!

Node.js html5 html css javascript
Jan.08,2022

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

Previous: How should the insertion operation of the red-black tree of the following link continue to correct the color?

Next: After uploading the picture, the address returned by the background has not changed, resulting in the browser cache not updated?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
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-1b328af-2b186.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-1b328af-2b186.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?