JavaScript循环致页面无响应求助：停车费用计算程序

嘿，我一眼就看出问题出在哪了——你写的while循环是个死循环！这直接导致浏览器主线程被占满，根本没法处理其他操作，页面自然就无响应了。

问题根源 #

你的llogarit函数里，ore变量只在函数开头获取了一次输入值，然后就进入while(ore!=-1)循环。但循环内部完全没有重新读取用户的新输入，只要第一次输入的不是-1，这个循环就会一直跑下去，永远停不下来。浏览器的主线程被这个循环霸占，连按钮点击、输入框输入这些事件都处理不了，可不就卡死了嘛。

修正方案 #

既然你是通过点击按钮来提交每次的停车时长，根本不需要在函数里用while循环。我们换个思路：用全局变量来累计总费用，每次点击按钮处理一次输入，判断如果是-1就停止本次计算，否则正常计费并更新累计值。

下面是修正后的完整代码：

<label> Ore ne garazh </label>
<input type="number" id="ore"/>
<button id="pagesa"> Pagesa</button>
<p id="rezultati"> </p>
<p id="totali"> </p>

<script>
// 把总费用变量放在全局作用域，这样每次点击都能保留累计值
let totali = 0;

window.addEventListener("load", start, false);

function start(){ 
  document.getElementById("pagesa").addEventListener("click", llogarit, false); 
}

function llogarit(){ 
  let ore = document.getElementById("ore").value; 
  ore = parseInt(ore);

  // 哨兵法：输入-1时停止处理
  if (ore === -1) {
    document.getElementById("rezultati").innerHTML = "程序已结束";
    // 可以禁用按钮防止继续点击
    document.getElementById("pagesa").disabled = true;
    return;
  }

  let shuma = 0;
  // 计算本次停车费用
  if (ore <= 3) {
    shuma = 2;
  } else if (ore > 3 && ore <= 24) {
    shuma = 10;
  } else {
    // 超过24小时的计费逻辑：前3小时2欧，之后每小时0.5欧
    shuma = 2 + (ore - 3) * 0.5;
  }

  // 累计总费用
  totali += shuma;

  // 更新页面显示
  document.getElementById("rezultati").innerHTML = `Klienti ka paguar: ${shuma}`;
  document.getElementById("totali").innerHTML = `Totali eshte: ${totali}`;

  // 清空输入框，方便下一次输入
  document.getElementById("ore").value = "";
}
</script>

关键改动说明 #

1. 全局变量存储累计值：把totali移到函数外面，这样每次点击按钮都能保留之前的累计结果，不会每次都重置为0。
2. 移除死循环：用if(ore === -1)来判断结束条件，每次点击只处理一次输入，避免霸占主线程。
3. 优化用户体验：处理完输入后清空输入框，输入-1时禁用按钮并提示结束，防止重复操作。
4. 变量声明规范：用let代替var，避免变量提升带来的潜在问题，代码更清晰。

这样修改后，程序就能支持多次输入，累计总费用，输入-1时正常结束，页面也不会再无响应啦！

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