JSFiddle - React, Tailwind, and code Playground

by ruirui

HTML

<div id="image-list">
</div>

CSS

img {
  display: block;
  margin-top: 10px;
}

JavaScript

function loadImg(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = function() {
      resolve(img)
    };
    img.onerror = function(e) {
      reject(e)
    };
    img.src = url;
  })
}

function addToHtml(img) {
  var imageList = document.getElementById('image-list');
  imageList.appendChild(img);
}
var urls = ['http://season.jpanj.com/001.jpg', 'http://season.jpanj.com/002.jpg', 'http://season.jpanj.com/003.jpg', 'http://season.jpanj.com/004.jpg', 'http://season.jpanj.com/005.jpg', 'http://season.jpanj.com/006.jpg', 'http://season.jpanj.com/007.jpg', 'http://season.jpanj.com/008.jpg', 'http://season.jpanj.com/009.jpg', 'http://season.jpanj.com/010.jpg', 'http://season.jpanj.com/011.jpg', 'http://season.jpanj.com/012.jpg', 'http://season.jpanj.com/013.jpg', 'http://season.jpanj.com/014.jpg', 'http://season.jpanj.com/015.jpg', 'http://season.jpanj.com/016.jpg'];


let queues = [];
let max = 3;
let promises;
queues = [].concat(urls);
promises = queues.splice(0, max).map(loadImg);

queues.reduce((last,item,index)=>{
  return last.then(()=>{
    return Promise.race(promises).then((res)=>{
      console.log(res);
      console.log('结束了');
      console.log(res.src)
      
      /* addToHtml(res) */;
      
      let pos = promises.findIndex(promise=>{
      	console.log(promise)
        return promise.url === res.src;
      })
      console.log(pos);
      if(pos !== -1) {
        console.log(pos);
        promises.splice(pos, 1);
        promises.push(loadImg(item));
      }
    }).catch(res=>{
      console.log(res);
    })
  })
},Promise.resolve())
/* let queues = [];
let max = 4;
let promises;
function load(url) {
  var p = new Promise(function (resolve,reject) {
    queues.push({
      url: url,
      resolve: resolve,
      reject: reject
    });
  });
  return p;
}
function run() {
  console.log(queues);
  promises = queues.splice(0, max).map(item=>{
    return handleImage(item);
  });
  console.log(promises);
 ...