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
相关产品推荐
相关产品推荐

