在前端交互开发中，文本逐字显示是常见的动效需求，通常会用递归函数逐个拼接字符实现效果，而文本全部显示完成后需要触发事件显示操作按钮，就需要明确递归的结束时机并绑定对应逻辑。
核心实现思路
整个功能的实现可以分为三个核心步骤：首先定义递归函数处理文本逐字输出的逻辑，然后判断递归是否执行到最后一个字符，也就是递归的结束条件，最后在递归结束时触发自定义事件或者直接执行显示按钮的逻辑。
文本逐字显示的递归实现
我们先实现基础的文本逐字显示功能，递归函数需要接收目标文本、当前索引、显示容器三个参数，每次递归输出一个字符，直到索引超过文本长度。
// 定义文本逐字显示的递归函数
function typeText(text, index, container) {
// 如果当前索引小于文本长度，继续递归
if (index < text.length) {
// 将当前索引对应的字符拼接到容器中
container.innerHTML += text.charAt(index);
// 延迟一段时间后执行下一次递归，实现逐字效果
setTimeout(() => {
typeText(text, index + 1, container);
}, 100);
} else {
// 递归结束，触发显示按钮的逻辑
showButton();
}
}
// 获取显示文本的容器
const textContainer = document.getElementById('text-container');
// 调用递归函数，初始索引为0
typeText('这是一段逐字显示的文本，全部显示完成后会出现操作按钮', 0, textContainer);递归结束时触发按钮显示
当递归函数执行到index >= text.length的条件时，就代表所有字符已经显示完成，此时执行显示按钮的函数即可。我们可以提前把按钮隐藏，在递归结束时修改按钮的显示状态。
// 显示按钮的函数
function showButton() {
const actionButton = document.getElementById('action-button');
// 修改按钮的样式为显示
actionButton.style.display = 'block';
}
// 页面加载完成后初始化
window.onload = function() {
// 初始隐藏按钮
const actionButton = document.getElementById('action-button');
actionButton.style.display = 'none';
};完整HTML示例
以下是包含页面结构的完整示例，可以直接复制到本地运行查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本逐字显示后显示按钮</title>
<style>
#text-container {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
#action-button {
padding: 8px 16px;
background-color: #1890ff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="text-container"></div>
<button id="action-button">点击操作</button>
<script>
function typeText(text, index, container) {
if (index < text.length) {
container.innerHTML += text.charAt(index);
setTimeout(() => {
typeText(text, index + 1, container);
}, 100);
} else {
showButton();
}
}
function showButton() {
const actionButton = document.getElementById('action-button');
actionButton.style.display = 'block';
}
window.onload = function() {
const textContainer = document.getElementById('text-container');
const actionButton = document.getElementById('action-button');
actionButton.style.display = 'none';
typeText('这是一段逐字显示的文本，全部显示完成后会出现操作按钮', 0, textContainer);
};
</script>
</body>
</html>注意事项
- 递归函数的延迟时间可以根据需求调整，数值越小字符显示速度越快
- 如果文本中包含HTML特殊字符，需要在拼接时做对应的转义处理，避免解析错误
- 如果页面中有多个逐字显示的需求，可以给递归函数增加回调参数的方式，让逻辑更灵活
通过这种方式，我们可以精准在JavaScript递归函数完成时触发对应事件，实现文本逐字显示后显示按钮的交互效果，该思路也可以扩展到其他递归结束后的事件触发场景中。
JavaScript递归函数事件触发文本逐字显示按钮显示修改时间：2026-06-08 17:33:24