在开发前端页面交互时，经常需要实现文本逐字显示的效果，并且在文本全部显示完成后才展示相关的操作按钮。使用JavaScript的递归函数可以很好地控制字符的逐个渲染节奏，配合异步等待逻辑就能实现等待文本完成后再显示按钮的需求。
实现思路梳理
整个效果的实现可以分为三个核心步骤：
- 准备需要逐字显示的文本内容和对应的DOM元素，以及初始隐藏的操作按钮
- 编写递归函数，每次递归渲染一个字符，直到所有字符都渲染完成
- 在递归函数执行完成后，修改按钮的显示状态，将其从隐藏切换为可见
基础实现代码
首先我们准备基础的HTML结构，包含文本容器和按钮：
<div id="textContainer"></div> <button id="actionBtn" style="display: none;">点击操作</button>
接下来编写JavaScript递归函数实现逐字显示逻辑：
// 获取DOM元素
const textContainer = document.getElementById('textContainer');
const actionBtn = document.getElementById('actionBtn');
// 需要逐字显示的文本内容
const targetText = '这是一段需要逐字显示的测试文本，等待全部显示完成后按钮会出现';
// 当前已经显示的字符索引
let currentIndex = 0;
// 递归逐字显示函数
function showTextRecursively() {
// 如果已经显示完所有字符，显示按钮并返回
if (currentIndex >= targetText.length) {
actionBtn.style.display = 'block';
return;
}
// 拼接当前已显示的字符
textContainer.textContent = targetText.slice(0, currentIndex + 1);
currentIndex++;
// 设置下一次递归的延迟时间，控制显示速度
setTimeout(() => {
showTextRecursively();
}, 100);
}
// 启动递归函数
showTextRecursively();递归函数等待完成的原理
上面的实现中，递归函数本身通过setTimeout来控制每次递归的执行间隔，当currentIndex大于等于文本长度时，说明所有字符都已经渲染完成，此时执行按钮显示的逻辑。这种方式的等待本质是依靠递归的终止条件来判断文本是否完成，不需要额外的等待标识。
如果需要更灵活地控制等待逻辑，也可以结合Promise来封装递归函数，让等待逻辑更清晰：
function showTextWithPromise(text, container, delay = 100) {
return new Promise((resolve) => {
let index = 0;
function recursiveShow() {
if (index >= text.length) {
resolve();
return;
}
container.textContent = text.slice(0, index + 1);
index++;
setTimeout(recursiveShow, delay);
}
recursiveShow();
});
}
// 使用方式
showTextWithPromise(targetText, textContainer).then(() => {
actionBtn.style.display = 'block';
});注意事项
- 递归函数的延迟时间可以根据实际需求调整，数值越小字符显示速度越快，反之则越慢
- 如果文本内容包含HTML标签，不能直接使用
textContent，需要改用innerHTML，同时要注意转义特殊字符避免XSS风险 - 递归深度不会超过文本的长度，一般短文本的递归深度不会造成栈溢出问题，长文本可以适当调整实现方式
- 如果需要在显示过程中暂停或者取消，需要额外添加控制变量来终止递归执行
实际场景扩展
这种递归逐字显示的逻辑还可以扩展到其他场景，比如模拟打字机效果、分步加载提示信息等。只需要调整递归的终止条件和每次递归的处理逻辑，就可以适配不同的交互需求。如果需要同时显示多个文本块，还可以封装成可复用的函数，传入不同的参数即可实现多个独立的逐字显示效果。
JavaScript递归函数逐字显示异步等待修改时间：2026-06-06 00:36:35