js 怎么根据数组内每一项的时长依次执行

Question

var arr = [{
        id: 0,
        img: '',
        music: '',
        duration: 2000
    }, {
        id: 1,
        img: '',
        music: '',
        duration: 4000
    }, {
        id: 2,
        img: '',
        music: '',
        duration: 6000
    }, {
        id: 3,
        img: '',
        music: '',
        duration: 3000
    }];

我有这样的一个数组，每一项有相应的图片、音乐、时长，想要达到根据每一项的duration值依次显示对应项的图片及音乐播放

Answer 1

在 ES6 下可以用 Promise 实现

// ES6 Promise 实现
function make(m) {
    return new Promise(resolve => {
        // show(m.img);
        // play(m.music);
        console.log(m);
        setTimeout(resolve, m.duration);
    });
}

let p = make(arr[0]);

for (let i = 1, len = arr.length; i < len; i++) {
    p = p.then(() => make(arr[i]));
}

用 es7 的 async/await 语法更简洁

(async function() {
    for (let i = 0, len = arr.length; i < len; i++) {
        const m = arr[i];
        await new Promise(resolve => {
            // show(m.img);
            // play(m.music);
            console.log(m);
            setTimeout(resolve, m.duration);
        });
    }
})();

如果是 es5 呢

可以用第三方 Promise 库，比如 Async.js、Bluebird、jQuery 的 Deferred 等，写法参考第1个

Answer 2

根据数组里的duration，进行一下排序。然后依次获取需要的内容就行。
比如升序你可以这样

 for (var i = 0; i < arr.length; i++) {
        for (var j = i; j < arr.length; j++) {
            if(arr[i].duration > arr[j].duration){
                  const xx = arr[i]
                  arr[i] = arr[j]
                  arr[j] = xx
            }
        }
    }

Answer 3

var arr = [{
        id: 0,
        img: '',
        music: '',
        duration: 7000
    }, {
        id: 1,
        img: '',
        music: '',
        duration: 2000
    }, {
        id: 2,
        img: '',
        music: '',
        duration: 4000
    }, {
        id: 3,
        img: '',
        music: '',
        duration: 6000
    }, {
        id: 4,
        img: '',
        music: '',
        duration: 3000
    }];
    var page = 0;
    function delayedLoop() {
        (++page < arr.length) && setTimeout(isfun, arr[page].duration);
    }
    delayedLoop();

Answer 4

看你的意思是不用排序，而是按照现有顺序自动播放。

for (let i = 0,time = 0;i<arr.length;time +=arr[i].duration,i++) {
    setTimeout(function() {
        //播放第i个
    }, time);
}