在JavaScript的while循环中添加回调函数

Question

我正在尝试在我的简历页面上复制打字机效果，除了一个部分，其他都已经实现了：

while (i < tags.length) {
    type(tags[i], content[i], 0, 50);
    i++;
}

这是写出行的函数，它能正常工作，但它会一次性写出所有行。我希望它能逐行写入，然后继续下一行。我知道解决方案在于添加回调函数，但我似乎无法正确地实现它。任何帮助/建议将不胜感激。谢谢！此外，这是完整的jsfiddle链接。

- Garrett

Answer 1

一个回调函数和递归函数看起来是解决问题的好方法。

var type = function (target, message, index, interval, callback) {    
    if (index < message.length) { 
        $(target).append(message[index++]); 
        setTimeout(function () { 
            type(target, message, index, interval, callback); 
        }, interval); 
    } else {
        callback();
    }
}

var i = 0;

(function recursive() {
    if (i < tags.length) {
        type(tags[i], content[i], 0, 50, recursive);
        i++;
    }
})();

FIDDLE

- adeneo

---

那非常棒，正好符合我的要求。感谢您的快速回复。在哪里可以查看一些关于setTimeout的文档呢？ - Garrett

这很不错。但就我个人而言，我不喜欢结果。必须等待并查看所有内容的加载。 - Yellen

MDN 通常有关于 JavaScript 的良好文档。 - adeneo

@yellen - 这就是OP所要求的，有时候这样做很整洁，只要我们知道访问者会坐在那里等待。 - adeneo

@adeneo - 抱歉，这不是针对您的解决方案的。 :P - Yellen

@yellen 是的，访问者可能需要等待几秒钟，但我认为效果是值得的 :) - Garrett