You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

JS使用Promise实现10到1倒计时后显示Happy Morning,Promise被rejected排错

问题原因分析
  • 核心错误点:Promise的状态一旦变更为fulfilled或rejected就会凝固,无法再次修改。你的代码中setInterval第一次执行回调时,读取到的runner值是初始的10,不满足runner === 0的判断条件,直接执行了reject("wht going wrong"),此时Promise已经被标记为rejected状态,后续定时器的所有执行都无法再改变这个状态,哪怕最后计数到0的时候执行resolve也无效。
  • 次要逻辑问题:你在修改文本后才判断是否结束,会导致计数多减一次,最终0甚至负数的状态会闪现后才跳转成Happy Morning,不符合10到1的倒计时需求。
修正后的代码
let counterElement = document.querySelector(".counter");

const promiseCheck = new Promise((resolve, reject) => {
  let Timer = setInterval(() => {
    let runner = parseInt(counterElement.innerText);
    // 当前计数为1时,下一次就到结束节点
    if (runner === 1) {
      clearInterval(Timer);
      counterElement.innerText = "Happy Morning";
      resolve("Happy Morning");
    } else {
      // 正常倒计时阶段只更新计数,不修改Promise状态
      counterElement.innerText = runner - 1;
    }
  }, 1000);
});

promiseCheck
  .then((data) => console.log(data))
  .catch((errData) => console.log(errData));
修正说明
  • 移除了非错误场景下的reject调用,只有真正发生异常时才需要调用reject,正常倒计时过程不需要操作Promise状态
  • 调整判断逻辑,保证10到1的所有数字都会正常显示,不会出现多余的负数或者0
  • 优化了DOM查询逻辑,重复使用已经获取到的counterElement,不需要每次定时器触发都重新查询DOM

内容的提问来源于stack exchange,提问作者Deepak

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.30 03:45:03