Question

我有一个数组，指示我想要播放的每个声音（inpData）。将通过html输入值附加。我想迭代列表并在每个声音播放之间添加延迟。到目前为止我试过这个：

var inpData = [];

function iterateArr(){
    var delay = 1000;
    setTimeout(function(){
        for(var i=0; i<inpData.length; i++){
            window['sound'+inpData[i]].play()
        }

        if(inpData.length)
            iterateArr(inpData)
    }, delay);
};

目前它只会循环输入的最新项目。例如，如果：

var inpData = ['G'];

它将无限循环G. 如果输入新笔记，F：

var inpData = ['G', 'F'];

它将无限循环F，而G仍在循环。

我想要什么..如：

var inpData = ['G', 'F', 'E'];

我希望代码播放G，延迟1秒;玩F，延迟1秒;玩E;停止。

提前感谢您的帮助！

PS 这是我的web开发项目。由于我们尚未学习JQuery，请不要回答。谢谢。

Answer 1

像这样简单的东西应该有用。

var sounds = ['G', 'F', 'E'];
var i = 0;

function play() {
  var sound = sounds[i];
  i++;
  console.log('Play ' + sound);
  
  if (i < sounds.length) setTimeout(play, 1000);
};

play();

Answer 2

首先，你说它是无限循环 - 很可能因为你永远不会删除inpData[]中的项目，然后你总是检查inpData.length哪个永远不会改变。如果这是无意的，您可以inpData.splice(i, 1)代替inpData[i]。

无论如何，现在是真实的部分。

我为此投票async/await

（因为我今天刚观看了一段视频，这是完美的时机）。

首先，你创建一个返回promise的函数，如下所示：

const makeTimer = val =>
  new Promise(resolve =>
    setTimeout(() => resolve(val), 1000)
  );

这将输入您的输入（'G'，'..'）并在1秒后解决。

async function iterateArr () {
  for (let i = 0; i < 10; ++i) {
    const key = await makeTimer('sound' + inpData[i]);

    // or you can do this
    // const key = await makeTimer('sound' + inpData.splice(i, 1));

    // This now happens every 1000ms
    window[ key ].play();
  }
}

iterateArr();

这个迭代就像你做的那样但有点不同。

在完整的1000毫秒过去之后，它不能完成每次迭代。

然而，这是ES2017（新语法），但Chrome，Firefox和Node 8+已经支持。

如果没有别的东西至少可以玩得开心:)在async / await（我之前看过的那个）上查看这个视频 - https://www.youtube.com/watch?v=NsQ2QIrQShU

如何在数组的每次迭代之间设置延迟？

2 个答案: