while/do-while循环致计算器卡顿冻结问题求助

问题根源 #

你用while/do-while循环的思路完全错了——JS是单线程运行的，同步循环会死死占用主线程，而且你的循环里从来没更新过lastCharacter的值，一旦进入循环，判断条件永远为true，浏览器根本没时间处理其他点击事件，直接就卡成无响应状态。

你要的是「当输入内容变化时，检查最后一个字符，然后更新按钮状态」，不是用循环持续死盯着状态。

正确实现思路 #

改用事件驱动的方式：每次输入内容（数字、操作符、删除等）发生变化时，执行一次状态检查，更新操作符按钮的禁用状态，而非用循环轮询。

完整代码示例 #

<!-- 计算器结构示例 -->
<div class="calculator">
  <div id="screen" class="screen">0</div>
  <div class="numbers">
    <button class="num-btn">1</button>
    <button class="num-btn">2</button>
    <button class="num-btn">3</button>
    <button class="num-btn">4</button>
    <button class="num-btn">5</button>
    <button id="clear-btn">C</button>
  </div>
  <div class="operators">
    <button id="add-operator">+</button>
    <button id="subtract-operator">-</button>
    <button id="multiply-operator">&times;</button>
    <button id="divide-operator">&divide;</button>
  </div>
</div>

<script>
const screenInput = document.getElementById('screen');
const operatorButtons = document.querySelectorAll('.operators button');
const numButtons = document.querySelectorAll('.num-btn');
const clearBtn = document.getElementById('clear-btn');
const operators = ['+', '-', '*', '/'];

// 核心函数：更新操作符按钮状态
function updateOperatorButtons() {
  const string = screenInput.textContent.trim();
  // 处理输入为空的边界情况
  if (!string) {
    operatorButtons.forEach(btn => btn.disabled = false);
    return;
  }
  const lastCharacter = string[string.length - 1];
  // 判断最后一个字符是否为操作符，批量设置按钮禁用状态
  const shouldDisable = operators.includes(lastCharacter);
  operatorButtons.forEach(btn => btn.disabled = shouldDisable);
}

// 数字按钮点击逻辑
numButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    // 替换初始的0，避免开头出现多个0
    screenInput.textContent = screenInput.textContent === '0' ? btn.textContent : screenInput.textContent + btn.textContent;
    updateOperatorButtons();
  });
});

// 操作符按钮点击逻辑
operatorButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    // 转义特殊符号为实际运算符号
    const operatorText = btn.textContent === '&times;' ? '*' : btn.textContent === '&divide;' ? '/' : btn.textContent;
    screenInput.textContent += operatorText;
    updateOperatorButtons();
  });
});

// 清除按钮逻辑
clearBtn.addEventListener('click', () => {
  screenInput.textContent = '0';
  updateOperatorButtons();
});

// 初始化按钮状态
updateOperatorButtons();
</script>

关键说明 #

1. 抛弃同步循环：用updateOperatorButtons单次检查状态，每次输入变化后调用一次，不会阻塞浏览器线程。
2. 简化判断逻辑：用operators.includes(lastCharacter)替代多个if判断，代码更简洁易维护。
3. 处理边界情况：输入为空或初始状态时，确保操作符按钮处于可用状态。

这样实现后，点击操作符按钮会自动禁用所有操作符按钮，点击数字按钮后操作符按钮会重新启用，完全符合你的需求，且不会出现浏览器冻结的问题。

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