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 实现//&nbsp;ES6&nbsp;Promise&nbsp;实现function&nbsp;make(m)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;new&nbsp;Promise(resolve&nbsp;=>&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;show(m.img); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;play(m.music); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(m); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(resolve,&nbsp;m.duration); &nbsp;&nbsp;&nbsp;&nbsp;}); }let&nbsp;p&nbsp;=&nbsp;make(arr[0]);for&nbsp;(let&nbsp;i&nbsp;=&nbsp;1,&nbsp;len&nbsp;=&nbsp;arr.length;&nbsp;i&nbsp;<&nbsp;len;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;p&nbsp;=&nbsp;p.then(()&nbsp;=>&nbsp;make(arr[i])); }用 es7 的 async/await 语法更简洁(async&nbsp;function()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(let&nbsp;i&nbsp;=&nbsp;0,&nbsp;len&nbsp;=&nbsp;arr.length;&nbsp;i&nbsp;<&nbsp;len;&nbsp;i++)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;m&nbsp;=&nbsp;arr[i];&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;await&nbsp;new&nbsp;Promise(resolve&nbsp;=>&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;show(m.img); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;play(m.music); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(m); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(resolve,&nbsp;m.duration); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;} })();如果是 es5 呢可以用第三方 Promise 库，比如 Async.js、Bluebird、jQuery 的 Deferred 等，写法参考第1个