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个