生成质数时，为何循环未结束，后续代码却提前执行？

核心问题 #

你遇到的矛盾现象（循环未结束但完成提示立刻出现）以及逻辑异常，主要由以下问题导致：

• 变量名冲突：全局的number是输入框元素，但在generatePrimes的while循环内部，又声明了同名局部变量number，容易引发逻辑混淆；
• 类型不匹配的判断：number.value是字符串类型，count是数字类型，非严格比较!=在输入无效时会导致循环无法终止；
• 未定义的random函数：原生JS没有random()函数，未定义时会抛出错误，导致循环中断，直接执行最后一行代码。

修复后的代码 #

const numberInput = document.querySelector(".number"); // 重命名避免变量冲突
const message = document.querySelector(".message"); // 假设页面存在该元素

function isPrime(n) {
  if (n <= 1) return false;
  for (let i = 2; i <= Math.sqrt(n); i++) {
    if (n % i === 0) {
      return false;
    }
  }
  return true;
}

function generatePrimes() {
  message.innerText = "generating prime number....";
  // 将输入值转为数字并校验有效性
  const targetCount = parseInt(numberInput.value, 10);
  if (isNaN(targetCount) || targetCount <= 0) {
    message.innerText = "请输入有效的正整数";
    return;
  }
  
  let count = 0;
  // 用<替代!=，避免count意外跳过目标值
  while (count < targetCount) {
    // 正确生成0-9999的随机整数
    const randNum = Math.floor(Math.random() * 10000);
    if (isPrime(randNum)) {
      console.log("Hi");
      count++;
    }
  }
  message.innerText = "Finished generating prime number";
}

关键修复说明 #

1. 变量重命名：把输入框变量改为numberInput，彻底避免和局部随机数变量的命名冲突；
2. 输入校验：用parseInt转换输入值，并判断是否为有效正整数，避免无效输入导致死循环；
3. 正确生成随机数：使用Math.floor(Math.random() * 10000)替代未定义的random函数，确保随机数生成逻辑合法；
4. 循环条件优化：将count != targetCount改为count < targetCount，逻辑更可靠，防止因异常情况导致count跳过目标值。

修改后，代码会严格按顺序执行：先显示生成中提示，然后进入同步循环生成质数（期间浏览器会卡顿），直到完成目标数量后，才会更新为完成提示，符合你预期的长同步任务表现。

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