在构建聊天机器人应用时，流式接口的实现可以显著提升用户体验，尤其是通过打字机效果（也称为“Typing Effect”）来模拟真实对话中的文字输入。本文将对比几种常见的实现方案，并提供相应的代码示例，帮助开发者更好地理解如何将 ChatGPT 的流式接口与前端展示结合。
方案一：使用 setTimeout 实现打字机效果
这种方式是通过 JavaScript 的 setTimeout 函数逐字显示文本，实现最基础的打字机效果。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>打字机效果</title>
<style>
#output {
font-family: monospace;
white-space: pre; /* 保留空格和换行 */
}
</style>
</head>
<body>
<div id="output"></div>
<script>
const text = "欢迎使用ChatGPT！这是一个打字机效果示例。";
const outputDiv = document.getElementById("output");
let index = 0;
function typeWriter() {
if (index < text.length) {
outputDiv.innerHTML += text.charAt(index);
index++;
setTimeout(typeWriter, 100); // 每100ms输出一个字符
}
}
typeWriter();
</script>
</body>
</html>
方案二：使用 CSS 动画实现打字机效果
使用 CSS 动画可以实现更为流畅的打字机效果，虽然实现起来较为复杂，但可提高视觉效果。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>打字机效果</title>
<style>
#output {
font-family: monospace;
border-right: 2px solid;
white-space: nowrap;
overflow: hidden;
animation: typing 4s steps(30) forwards, blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: black; }
}
</style>
</head>
<body>
<div id="output">欢迎使用ChatGPT！这是一个打字机效果示例。</div>
</body>
</html>
方案三：使用 JavaScript 的 async/await 和 Promise
这种实现方式使用了 async/await 和 Promise，使代码结构更清晰，同时也有效率地控制了字符的显示时间。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>打字机效果</title>
<style>
#output {
font-family: monospace;
white-space: pre;
}
</style>
</head>
<body>
<div id="output"></div>
<script>
const text = "欢迎使用ChatGPT！这是一个打字机效果示例。";
const outputDiv = document.getElementById("output");
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function typeWriter() {
for (let char of text) {
outputDiv.innerHTML += char;
await sleep(100); // 每100ms输出一个字符
}
}
typeWriter();
</script>
</body>
</html>
方案对比
- setTimeout: 该方案简单易懂，但难以精确控制多个并发的打字效果。
- CSS 动画: 方案可实现更好的视觉效果，但对于用户输入文本的灵活性较差。
- async/await: 代码结构清晰、易于掌控，并可扩展性强，是目前推荐的实现方案。
以上三种方案均有各自的优缺点，开发者可以根据不同的需求选用合适的方案。当面对更复杂的应用场景时，可以考虑结合这些方案，以实现更佳的用户体验。
