实现思路梳理
要实现文本逐字显示后显示按钮的效果，核心分为三个部分：首先用递归函数逐个拼接字符并更新到页面上，其次在递归执行到最后一个字符时判断递归结束，最后在递归结束时修改按钮的显示状态。整个流程不需要依赖复杂的第三方库，只用原生JavaScript就可以完成。
递归函数的设计
递归函数需要接收当前已经显示的字符位置索引，每次执行时把对应位置的字符拼接到结果字符串中，然后更新到页面的文本容器里。如果当前索引还没到文本总长度，就设置定时器延迟一段时间后再次调用自身，实现逐字显示的效果；如果已经到最后一个字符，说明递归即将结束，这时候就可以触发对应的结束逻辑。
递归结束的判断与事件触发
我们可以在递归函数里加一个判断条件，当当前索引等于文本长度减1的时候，就说明所有字符都已经显示完成，这时候可以执行显示按钮的操作，也可以自定义一个结束事件，方便后续扩展其他逻辑。
完整代码实现
下面是完整的可运行示例代码，你可以直接复制到HTML文件里运行查看效果：
// 要逐字显示的文本
const targetText = "欢迎来到我的个人主页，这里会分享前端开发相关的技术内容";
// 文本显示的容器
const textContainer = document.getElementById("text-container");
// 要显示的按钮
const actionButton = document.getElementById("action-button");
// 初始化当前显示的字符索引
let currentIndex = 0;
// 递归函数，实现逐字显示
function showTextRecursively() {
// 拼接当前字符到结果字符串
const currentText = targetText.substring(0, currentIndex + 1);
// 更新页面文本
textContainer.textContent = currentText;
// 判断是否已经显示完所有字符
if (currentIndex < targetText.length - 1) {
// 还没显示完，索引加1，延迟后继续执行递归
currentIndex++;
setTimeout(showTextRecursively, 100);
} else {
// 递归结束，显示按钮
actionButton.style.display = "block";
// 可以自定义触发结束事件，方便后续扩展
const endEvent = new Event("textShowEnd");
document.dispatchEvent(endEvent);
}
}
// 页面加载完成后启动递归
window.onload = function() {
// 初始隐藏按钮
actionButton.style.display = "none";
// 启动逐字显示
showTextRecursively();
// 可以监听自定义结束事件，添加其他逻辑
document.addEventListener("textShowEnd", function() {
console.log("文本逐字显示已经完成");
});
};代码说明
上面的代码中，我们首先定义了要显示的文本、文本容器和按钮元素，然后编写了递归函数showTextRecursively。每次递归会截取文本的前currentIndex+1个字符显示到容器里，如果还没到最后一个字符，就延迟100毫秒后再次调用自身。当所有字符都显示完成后，会把按钮的display属性改为block显示出来，同时派发一个自定义的textShowEnd事件，你可以根据需要给这个事件添加更多的处理逻辑。
注意事项
- 递归函数里用
setTimeout延迟执行是为了模拟逐字显示的效果，你可以根据需要调整延迟的时间，数值越小显示速度越快。 - 如果文本长度很长，递归的调用次数会比较多，不过这种场景下的递归深度一般不会超过JavaScript的调用栈限制，实际使用中不需要担心栈溢出的问题。
- 自定义事件的触发可以让你在递归结束时执行更多自定义逻辑，而不需要把所有逻辑都写在递归函数里，让代码结构更清晰。
效果扩展
如果你想要在文本显示的时候加上打字机的光标效果，可以在文本容器后面加一个动态的伪元素，在递归结束的时候移除这个伪元素就可以了。另外也可以把递归函数封装成一个通用的工具函数，接收文本、速度、结束回调等参数，方便在多个地方复用。
JavaScript递归函数事件触发文本逐字显示dom操作修改时间：2026-06-06 01:05:02