JavaScript需求：先执行冷却倒计时再展示war()函数执行结果

没问题，咱们直接调整逻辑顺序就能搞定！核心思路就是把冷却倒计时的执行逻辑放在最前面，等计时结束的回调里再去触发展示结果的操作——完全颠倒原来的执行顺序就行。

核心调整逻辑 #

原来的war()是「先出结果→再冷却」，现在要改成「先冷却→冷却结束后出结果」，本质就是把结果展示的代码放进倒计时结束的触发环节里。

举个具体代码示例 #

假设你原来的war()函数大概是这样的（先展示结果再冷却）：

function war() {
  // 先展示战斗结果
  const battleResult = getWarResult(); // 假设这是计算战斗结果的函数
  document.getElementById('result-box').innerText = `战斗结束：${battleResult}`;

  // 再启动带颜色的冷却倒计时
  startColoredCoolDown(60); // 假设这是你的倒计时函数，参数是秒数
}

那调整后的代码应该改成这样（先冷却再出结果）：

function war() {
  // 第一步：先启动冷却倒计时，同时传入冷却结束后的回调函数
  startColoredCoolDown(60, () => {
    // 倒计时彻底结束后，才执行结果展示的逻辑
    const battleResult = getWarResult();
    document.getElementById('result-box').innerText = `战斗结束：${battleResult}`;
  });
}

// 对应的倒计时函数需要支持接收回调参数，用来触发后续操作
function startColoredCoolDown(seconds, onCoolDownFinish) {
  let remainingTime = seconds;
  const timerElement = document.getElementById('cool-down-display');

  // 初始化倒计时的样式（比如默认红色高亮）
  timerElement.style.color = '#ff3333';
  timerElement.innerText = `冷却中：${remainingTime}秒`;

  const countDownTimer = setInterval(() => {
    remainingTime--;
    timerElement.innerText = `冷却中：${remainingTime}秒`;

    // 可以根据剩余时间调整颜色（比如最后10秒变绿色提醒）
    if (remainingTime <= 10) {
      timerElement.style.color = '#2ecc71';
    }

    // 倒计时结束的处理逻辑
    if (remainingTime <= 0) {
      clearInterval(countDownTimer);
      timerElement.innerText = '冷却完成！';
      timerElement.style.color = '#333333';

      // 触发回调，执行展示结果的操作
      if (typeof onCoolDownFinish === 'function') {
        onCoolDownFinish();
      }
    }
  }, 1000);
}

特殊情况处理（如果倒计时函数无法修改） #

要是你的startColoredCoolDown是封装好的第三方函数，没办法直接加回调参数，那可以用Promise来包装它：

// 把倒计时函数包装成Promise，方便用async/await控制顺序
function coolDownAsPromise(seconds) {
  return new Promise(resolve => {
    startColoredCoolDown(seconds);
    // 监听倒计时元素的状态，判断冷却是否完成
    const checkFinish = setInterval(() => {
      const timerText = document.getElementById('cool-down-display').innerText;
      if (timerText.includes('冷却完成')) {
        clearInterval(checkFinish);
        resolve();
      }
    }, 500);
  });
}

// 用async/await改写war函数
async function war() {
  await coolDownAsPromise(60); // 先等冷却彻底结束
  // 再展示战斗结果
  const battleResult = getWarResult();
  document.getElementById('result-box').innerText = `战斗结束：${battleResult}`;
}

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