Question

有人可以解释为什么控制台中的行一次性附加所有内容吗？我希望他们一个接一个地追加。 row是程序中的一个字符串数组，这里是代码：

var dodajRed = function(redenBroj) {
    setTimeout(function() {
        $('.console').append('<p>' + row[redenBroj] + '</p>');
    }, 1500);
}

dodajRed(0);
dodajRed(1);
dodajRed(2);

我希望这些行与1500ms delay逐个显示，但我会在1500ms之后显示所有行。

Answer 1

有很多方法可以做到这一点。一种可能的解决方案是调整超时：

var dodajRed = function(redenBroj){
  setTimeout(function () {
    $('.console').append('<p>'+row[redenBroj]+'</p>');
  }, (redenBroj + 1) * 1500);
}

dodajRed(0);
dodajRed(1);
dodajRed(2);

您也可以设置一个承诺链，但您需要一个支持ECMAScript 6的外部库或浏览器。

Answer 2

请尝试使用setInterval：

(function() {
  var index = 0,
    row = ["One", "Two", "Three"],
    id,
    stop = function() {
      if (index > 2) {
        clearInterval(id);
      }
    },
    start = function() {
      id = setInterval(function() {
        $('.console').append('<p>' + row[index] + '</p>');
        index++;
        stop();
      }, 1500);
    };
  start();
}());

JSFiddle

jQuery追加延迟

2 个答案: