Question

var arr = [[1,2,3],[4,5,6],[7,8,9]];


function out(ar){

  var interval = setInterval(function(){
    for (var i=0; i<ar.length;i++){

      for (var j=0;j<ar[i].length;j++){

        document.write(ar[i][j]);

      }
    document.write("</br>");
    }
  clearInterval(interval);
  },1000);

}

out(arr);

http://jsbin.com/edanib/edit

此代码有效，但我希望在输出每个数字之前延迟一秒钟。上面的代码不能这样做。我如何在 vanilla Javascript中执行此操作？

Answer 1

setInterval不能保证让你获得1秒的间距，因为其他东西可能会运行，但你可以通过以下方式接近

function out(ar) {
  var i = 0, j = 0;
  var interval = setInterval(function(){
    // Start with the next row if the last one was finished.
    if (i < ar.length && j == ar[i].length) {
      ++i; 
      j = 0;
      // Put a line after it.
      document.body.appendChild(document.createElement('br'));
    }
    // Check if we're out of rows.
    if (i >= ar.length) { clearInterval(interval); return; }

    // Write out a number.
    document.body.appendChild(document.createTextNode('' + ar[i][j]));

    // We're done with the cell that we just wrote.
    ++j;
  }, 1000 /* milliseconds */);
}

将数组索引放在函数外部，因此每次触发间隔时，都会从上次运行中获得循环状态。

此外，您不能在区间处理程序中使用document.write，因为在文档关闭现有文档之后调用document.write。

Answer 2

最简单的方法是使用setInterval创建一个循环。让函数捕获计数器并在每个回合适当增加它们

尝试以下

function output(arr) {
  var i = 0; 
  var j = 0;
  var interval = setInterval(function () { 

    while (i < arr.length && j === arr[i].length) {
      j = 0;
      i++;
    }

    if (i === arr.length) {
      clearInterval(interval);
    } else {
      document.write(arr[i][j]);
    }
    j++;
  }, 1000);
};

Answer 3

尝试这样：首先，创建一个单维数组，你给一个调用自身的输出函数延迟：

var arr = [[1,2,3],[4,5,6],[7,8,9]];


function out(ar){
    var singleDim = []
    for (var i=0; i<ar.length;i++){

      for (var j=0;j<ar[i].length;j++){

          singleDim.push(ar[i][j]);

      }
    }
    outDelayed(singleDim,0,1000);
}

function outDelayed(arr,index,delay) {
    if (index < arr.length) {
        document.write(arr[index]);
        setTimeout(function(){
            outDelay(arr,index+1,delay);
        },delay);
    }
}

out(arr);

如何在迭代之间设置一秒延迟？

3 个答案: