本文将介绍如何使用 JavaScript 递归函数实现文本逐字显示的效果，并在文本显示完成后显示一个按钮。核心在于理解递归函数的工作方式，并在适当的时机触发按钮的显示。通过修改 `setTimeout` 中的逻辑，我们可以在最后一个字符显示时同步显示按钮，避免额外的等待时间。
实现文本逐字显示
首先，我们来看一下如何使用递归函数实现文本逐字显示的效果。以下是一个基本的实现：
var showText = function (target, message, index, interval) {
if (index < message.length) {
$(target).append(message[index++]);
setTimeout(function () {
showText(target, message, index, interval);
}, interval);
}
}这个函数接收四个参数：
- target: 要显示文本的目标元素（jQuery 对象）。
- message: 要显示的文本字符串。
- index: 当前显示的字符索引，初始值为 0。
- interval: 显示下一个字符的间隔时间（毫秒）。
函数的工作原理如下：
立即学习“Java免费学习笔记（深入）”；
- 如果 index 小于 message 的长度，则将 message 中索引为 index 的字符添加到 target 元素中。
- index 自增 1。
- 使用 setTimeout 函数，在 interval 毫秒后再次调用 showText 函数，从而实现递归调用。
等待递归函数完成并显示按钮
现在，我们需要在文本显示完成后显示一个按钮。一种常见的错误做法是在递归函数外部直接显示按钮，但这会导致按钮立即显示，而不会等待文本显示完成。
正确的做法是在 setTimeout 的回调函数中判断是否是最后一个字符，如果是，则显示按钮。以下是修改后的代码：
var showText = function(target, message, index, interval) {
if (index < message.length) {
$(target).append(message[index++]);
setTimeout(function() {
showText(target, message, index, interval);
if (index == message.length) {
$("#btn").show();
}
}, interval);
}
};关键在于 if (index == message.length) 这个条件判断。当 index 等于 message 的长度时，说明所有字符都已经显示完毕，此时我们就可以显示按钮了。
完整示例代码
以下是一个完整的示例代码，包含了 HTML、CSS 和 JavaScript：
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="box"></div> <button id="btn">Show</button>
CSS:
#btn {
display: none;
}JavaScript:
var showText = function(target, message, index, interval) {
if (index < message.length) {
$(target).append(message[index++]);
setTimeout(function() {
showText(target, message, index, interval);
if (index == message.length) {
$("#btn").show();
}
}, interval);
}
};
$(document).ready(function() {
showText($("#box"), "TEST", 0, 1000);
});在这个示例中，我们首先隐藏了按钮 (display: none)，然后在 showText 函数的递归过程中，当所有字符都显示完毕后，再显示按钮 ($("#btn").show())。
注意事项
- 确保引入了 jQuery 库，因为代码中使用了 jQuery 的 $ 符号。
- 可以根据需要调整 interval 参数来控制文本显示的速度。
- index == message.length 的判断必须放在 setTimeout 的回调函数中，才能确保在文本显示完成后执行。
总结
通过修改 setTimeout 回调函数中的逻辑，我们可以很容易地实现等待 JavaScript 递归函数完成的效果，并在完成时执行特定的操作，例如显示按钮。这种方法可以应用于各种需要等待异步操作完成的场景。
