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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-14

浏览次数：次

返回列表

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

本文将介绍如何使用 J*aScript 递归函数实现文本逐字显示的效果，并在文本显示完成后显示一个按钮。核心在于理解递归函数的工作方式，并在适当的时机触发按钮的显示。通过修改 `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: 显示下一个字符的间隔时间（毫秒）。

函数的工作原理如下：

如果 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 的长度时，说明所有字符都已经显示完毕，此时我们就可以显示按钮了。

秀脸FacePlay

一款集成AI换脸、照片跳舞等多种AI特效玩法的App

124 查看详情秀脸FacePlay

完整示例代码

以下是一个完整的示例代码，包含了 HTML、CSS 和 J*aScript：

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;
}

J*aScript:

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);
});