异步遍历childNodes实现顺序打字机：forEach无法等待的问题求助

你的核心问题在于**forEach无法异步等待**：遍历childNodes时，每个异步回调会立即执行，不会等待前一个的await type(...)完成，导致所有子元素的打字效果同时启动。另外原代码还存在destroy方法无法访问timeout变量的问题，需要一并修复。

修改方案： #

1. 用for...of循环替代forEach，它支持在循环内使用await，确保子元素的打字操作按顺序执行。
2. 将timeout变量提升到typewriter函数的外层作用域，让destroy方法可以正确清除定时器。
3. 优化type函数的递归逻辑，避免定时器堆积。

修改后的完整代码： #

<script>
    const typewriter = (node) => {
        let timeout; // 提升到外层作用域，让destroy可以访问
        const type = async (node, fullText) => {
            return new Promise((resolve) => {
                const writeNextChar = () => {
                    if (node.textContent.length >= fullText.length) {
                        resolve();
                        return;
                    }
                    node.textContent = fullText.substring(0, node.textContent.length + 1);
                    timeout = setTimeout(writeNextChar, 100);
                };
                writeNextChar();
            });
        };

        // 用for...of替代forEach，实现顺序异步执行
        (async () => {
            for (const child of node.childNodes) {
                if (child.nodeType === 1) { // 只处理元素节点
                    const fullText = child.textContent;
                    child.textContent = '';
                    await type(child, fullText);
                }
            }
        })();

        return {
            destroy() {
                clearTimeout(timeout);
            }
        };
    };
</script>

<span use:typewriter><slot /></span>

关键修改说明： #

• for...of循环：遍历子节点时，每次等待当前子元素的打字动画完成后，才会处理下一个子元素，实现严格的顺序执行。
• 定时器作用域修复：将timeout变量移到typewriter函数内部，确保组件销毁时能正确清除未完成的定时器，避免内存泄漏。
• 递归逻辑优化：将递归调用封装到writeNextChar函数中，每次只保留一个定时器，避免多个定时器同时运行导致的混乱。

内容的提问来源于stack exchange，提问作者16ar