无法在模板字面量中调用函数的问题求助

嘿，兄弟，问题其实很明显——你的startCountdown函数确实没有return语句，所以它默认返回undefined，这就是模板里显示undefined的原因。不过就算你加了return，这里还有个更关键的问题：setInterval是异步的，你没法直接通过函数返回值来获取实时变化的倒计时数字。

为什么原来的代码不行？ #

当你在模板字面量里调用startCountdown(5)时，JS会立即执行这个函数，但函数里的setInterval是在1秒后才开始触发的，函数本身会先执行完（因为没有return语句），所以给模板返回了undefined。就算你在函数开头写return counter，那也只能返回初始的5，之后counter减少的变化不会同步到已经渲染好的HTML里——模板一旦渲染完成，就不会自动跟着变量变化更新了。

正确的解决方案 #

正确的做法是先把初始的倒计时数字渲染到页面上，然后通过定时器去更新DOM元素的内容，而不是试图在模板里直接获取函数的返回值。给你改好的代码：

// 先渲染带初始秒数的内容，给倒计时数字加个id方便后续操作
document.body.innerHTML = `<p>Quick! Click to stop the page from self destructing. You have <span id="countdown">5</span> seconds.</p>`;

function startCountdown(seconds) {
  let counter = seconds;
  // 获取显示倒计时的元素
  const countdownEl = document.getElementById('countdown');
  
  const interval = setInterval(() => {
    counter--;
    // 更新页面上的数字
    countdownEl.textContent = counter;
    console.log(counter);
    
    if (counter < 0) {
      clearInterval(interval);
      // 倒计时结束可以替换提示文本
      countdownEl.textContent = "Time's up!";
    }
  }, 1000);
}

// 启动倒计时
startCountdown(5);

这样页面一开始会显示5秒，然后每秒自动减1，直到倒计时结束，完全不会出现undefined的问题。

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