JavaScript硬币系统如何实现无需每毫秒执行函数的简洁方案

优化方案 #

你当前的1毫秒定时轮询属于冗余逻辑，存在不必要的性能开销：你的硬币数值只会在点击+1/-1按钮时发生变更，按钮的启用状态只需要在数值变动时同步更新一次即可，完全不需要持续检测。

具体优化只需要两步：

• 把按钮状态更新的逻辑抽成独立函数，直接读取内存中的计数变量判断，比读取DOM的innerHTML更高效可靠
• 在加减数值的函数执行完成后、以及页面初始化时调用这个状态更新函数，保证状态始终同步

优化后的完整JS代码如下：

var numberCounter = 0;
var numberEl = document.getElementById("number");
var targetBtn = document.getElementById("enableMe");

// 抽离按钮状态更新逻辑
function syncBtnStatus() {
  targetBtn.disabled = numberCounter < 10;
}

// 初始化时执行一次，保证页面加载后按钮状态正确
syncBtnStatus();

function plusOne() {
  numberCounter++;
  numberEl.innerHTML = numberCounter;
  syncBtnStatus();
}

function minusOne() {
  numberCounter--;
  numberEl.innerHTML = numberCounter;
  syncBtnStatus();
}

优化后的代码完全移除了无效的轮询逻辑，代码结构更清晰，后续如果要修改按钮启用的阈值，只需要修改syncBtnStatus函数内的判断条件即可，维护成本更低。

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