JavaScript：使用回调函数实现数组元素延迟/重复打印的问题

咱们先聊聊你代码里的问题：你现在的setTimeout只做了一次2秒延迟，之后执行的typing函数里用了同步的for循环——这就导致等2秒后，循环会瞬间把所有元素都打印出来，完全没达到逐个间隔的效果。

下面给你两种可行的修复方案：

方案一：递归调用（直观易理解） #

这种方法每次打印一个元素，然后延迟2秒再调用自身处理下一个，直到所有元素都打印完毕：

var words = ["horse","pig","fish","lion"];
var currentIndex = 0;

function printNextWord() {
  // 终止条件：所有元素都处理完就停止
  if (currentIndex >= words.length) return;
  
  // 打印当前元素（加<br>是为了换行，方便区分每个元素）
  document.write(words[currentIndex] + "<br>");
  currentIndex++;
  
  // 2秒后继续打印下一个
  setTimeout(printNextWord, 2000);
}

// 启动打印流程
printNextWord();

方案二：利用forEach和索引计算延迟 #

这种方法通过元素的索引来计算每个元素的延迟时间，第一个元素延迟0秒（立刻打印），第二个延迟2秒，第三个4秒，以此类推：

var words = ["horse","pig","fish","lion"];

words.forEach(function(word, index) {
  // 每个元素的延迟时间 = 索引值 * 2000毫秒
  setTimeout(function() {
    document.write(word + "<br>");
  }, index * 2000);
});

为什么原来的代码不行？ #

再回头看你的原代码：

var words = ["horse","pig","fish","lion"]
var time
function display(callback){
 time = setTimeout(typing, 2000);
}
function typing(){
 for (var i=0; i<words.length; i++)
 document.write(words[i])
}
display(typing);

这里的setTimeout只是让typing函数在2秒后执行，但typing里的for循环是同步执行的——它会在一瞬间把所有words数组里的元素都打印出来，所以你看到的就是等2秒后一次性输出所有内容。

内容的提问来源于stack exchange，提问作者Chris A.