如何让JS函数运行时实时输出？Cookie Clicker类游戏技术求助

你的问题出在同步阻塞的sleep函数和while循环上——浏览器的UI更新是在主线程空闲时处理的，而你的auto函数里，同步sleep会把主线程卡10秒，期间所有UI更新都被挂起，直到整个循环跑完才会一次性显示结果。

改成异步定时器就能解决，下面是修正后的代码：

var money = 0
var autoCount = 0
let dollars = document.getElementById("total")
let dollarclick = document.getElementById("click1")
let autoclick = document.getElementById("buyauto")

dollarclick.addEventListener("click", clicked)
autoclick.addEventListener("click", startAutoClick)

function clicked() {
  money += 1
  updateDisplay()
}

function startAutoClick() {
  autoclick.disabled = true
  // 用setInterval实现每秒执行一次
  const autoTimer = setInterval(() => {
    if (autoCount >= 10) {
      clearInterval(autoTimer) // 执行10次后停止定时器
      return
    }
    money += 1
    updateDisplay()
    autoCount += 1
    console.log(money)
  }, 1000)
}

// 抽离更新显示的逻辑，避免重复代码
function updateDisplay() {
  dollars.innerHTML = "$" + money.toString()
}

关键改动说明： #

• 移除了同步阻塞的sleep函数，改用setInterval异步定时执行，每次间隔1秒，执行后会把控制权还给浏览器，让UI能实时更新。
• 把原来的while循环换成定时器的计数逻辑，每执行一次autoCount加1，到10次就清除定时器停止自动点击。
• 抽离了updateDisplay函数，统一处理积分显示，减少重复代码。
• 变量名i改成autoCount，语义更清晰。

这样修改后，自动点击功能会每秒增加1积分，并且实时更新到页面上，同时按钮仍然只能点击一次。

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