JavaScript 递归函数等待完成：实现文本逐字显示后显示按钮

本文将介绍如何使用 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免费学习笔记（深入）”；

1. 如果 index 小于 message 的长度，则将 message 中索引为 index 的字符添加到 target 元素中。
2. index 自增 1。
3. 使用 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 的长度时，说明所有字符都已经显示完毕，此时我们就可以显示按钮了。

腾讯智影-AI数字人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

73

查看详情

完整示例代码

以下是一个完整的示例代码，包含了 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 递归函数完成的效果，并在完成时执行特定的操作，例如显示按钮。这种方法可以应用于各种需要等待异步操作完成的场景。

以上就是JavaScript 递归函数等待完成：实现文本逐字显示后显示按钮的详细内容，更多请关注php中文网其它相关文章！