如何在浏览器中输出递归countdown函数？当前尝试未成功

你的原递归函数通过console.log()能在在线编辑器正常输出5到1，但在浏览器页面展示时，自己编写的代码无法复现预期效果，核心问题是同步递归执行速度过快，浏览器来不及渲染中间状态，同时你的尝试代码还存在几个细节错误，以下是修正方案和正确实现：

你的尝试代码存在的问题 #

• 按钮点击事件onclick="countDown()"未传递参数，导致函数接收的i为undefined
• 同步递归中每次用innerHTML覆盖内容，浏览器只会渲染最后一次赋值结果（即1）
• 未声明变量cat，且递归函数无返回值，cat实际为undefined，最后一行的返回赋值毫无意义

方案1：带动画效果的依次倒计时 #

如果想看到数字从5到1依次变化的效果，需要用setTimeout将递归调用转为异步，给浏览器留出渲染时间：

HTML代码 #

<div>
    countdown attempt
    <button onclick="countDown(5)">click me</button>
    <p id="recursiveFuncAttempt"></p>
</div>

JavaScript代码 #

function countDown(i) {
    const displayEl = document.getElementById("recursiveFuncAttempt");
    // 用textContent比innerHTML更安全，避免HTML解析风险
    displayEl.textContent = i;
    
    if (i <= 1) {
        return;
    }
    
    // 延迟1秒执行下一次递归，让页面有时间渲染当前数字
    setTimeout(() => {
        countDown(i - 1);
    }, 1000);
}

方案2：一次性显示所有倒计时数字 #

如果不需要动画，只想把5到1全部展示出来，可以通过追加内容的方式实现：

HTML代码（同方案1） #

<div>
    countdown attempt
    <button onclick="countDown(5)">click me</button>
    <p id="recursiveFuncAttempt"></p>
</div>

JavaScript代码 #

function countDown(i) {
    const displayEl = document.getElementById("recursiveFuncAttempt");
    // 追加当前数字到内容末尾，而非覆盖
    displayEl.textContent += `${i} `;
    
    if (i <= 1) {
        return;
    }
    
    countDown(i - 1);
}

内容的提问来源于stack exchange，提问作者Zero Hour