[分享]JavaScript中Prompt弹窗反复弹出？教你如何解决！

恼人的弹窗死循环？教你轻松解决Prompt重复弹出问题！你是否遇到过这样的情况：编写了一个简单的 JavaScript 代码，希望通过 prompt 函数与用户交互，却陷入了弹窗无限弹出的怪圈？你一遍...

恼人的弹窗死循环？教你轻松解决Prompt重复弹出问题！

你是否遇到过这样的情况：编写了一个简单的 JavaScript 代码，希望通过 prompt 函数与用户交互，却陷入了弹窗无限弹出的怪圈？你一遍遍地点击“确定”或“取消”，却无法摆脱这个困境。本文将带你一步步分析问题根源，并提供简洁有效的解决方案，助你彻底告别弹窗死循环的烦恼。

代码剖析： 当 Prompt 遭遇“死循环”

让我们以一个简单的“石头剪刀布”游戏为例，解释 prompt 函数重复弹出的原因。

function getHumanChoice() {
  let humanChoice = prompt('Choose rock, paper, or scissors:').toLowerCase();

  while (humanChoice !== 'rock' && 
         humanChoice !== 'paper' && 
         humanChoice !== 'scissors') {
    humanChoice = prompt('Please enter a valid choice:').toLowerCase();
  }

  return humanChoice;
}

let playerChoice = getHumanChoice();
console.log(playerChoice); 

这段代码的目标是获取用户输入的“石头”、“剪刀”或“布”。为了确保用户输入的一致性，代码中使用了 toLowerCase 方法将输入值转换为小写。然而，看似简单的几行代码，却隐藏着导致死循环的陷阱。

问题的关键在于： 当用户直接关闭 prompt 弹窗，或者没有输入任何内容就按下“确定”按钮时，prompt 函数会返回 null。而 null 没有任何方法，当你尝试对 null 调用 toLowerCase 方法时，就会导致 TypeError 错误，中断代码的正常执行。由于错误发生在循环判断条件之前，循环条件永远无法得到满足， prompt 函数就会不断地被调用，弹窗也就随之不停地弹出。

你可能会尝试使用 if 语句判断 humanChoice 是否为 null 来解决问题，例如：

if (humanChoice === null) {
  humanChoice = prompt('Please enter a valid choice:');
} else {
  humanChoice = humanChoice.toLowerCase();
}

然而，这种写法依然存在漏洞。当 humanChoice 为 null 时，虽然代码会重新弹出提示输入的弹窗，但用户输入的值并没有被正确处理，humanChoice 的值依然为 null，循环判断条件依然无法得到满足，弹窗死循环的问题依然存在。

解决方案： 跳出怪圈，还你清静

想要彻底解决 prompt 函数重复弹出的问题，我们需要从两方面入手：

1. 避免对 null 调用方法： 在使用 toLowerCase 方法之前，必须先判断 humanChoice 是否为 null，避免 TypeError 错误。

2. 正确处理 null 值： 当 humanChoice 为 null 时，应该终止循环，而不是继续执行后续代码。

以下是经过优化后的代码：

function getHumanChoice() {
  let humanChoice;

  while (true) { 
    humanChoice = prompt('Choose rock, paper, or scissors:');

    // 处理用户关闭弹窗或输入为空的情况
    if (humanChoice === null || humanChoice.trim() === "") {
      return null; // 返回 null，表示用户没有做出选择
    }

    humanChoice = humanChoice.toLowerCase();

    if (humanChoice === 'rock' || humanChoice === 'paper' || humanChoice === 'scissors') {
      return humanChoice; 
    } else {
      alert('Please enter a valid choice.');
    }
  }
}

let playerChoice = getHumanChoice();
console.log(playerChoice);

代码解读：

1. 使用 while(true) 创建循环： 我们使用 while(true) 创建了一个无限循环，简化了循环条件，将判断逻辑移至循环体内部。

2. 优先判断 null 和空字符串： 每次循环开始时，首先使用 humanChoice === null || humanChoice.trim() === "" 判断 humanChoice 是否为 null 或空字符串。

3. null 和空字符串处理： 如果 humanChoice 为 null 或空字符串，说明用户关闭了弹窗或没有输入任何内容，我们使用 return null; 终止循环，并返回 null，表示用户没有做出选择。

4. 输入验证： 如果 humanChoice 不为 null 且不为空字符串，则将其转换为小写，并判断是否为有效值（“石头”、“剪刀”或“布”）。如果有效，则使用 return humanChoice; 返回用户选择；否则，使用 alert 函数提示用户重新输入。

通过以上优化，我们成功地解决了 prompt 函数重复弹出的问题，确保代码在各种情况下都能正常运行。

常见问题解答

1. 为什么不能直接在循环条件中判断 humanChoice 是否为有效值？

如果直接在循环条件中判断，当 humanChoice 为 null 时，调用 toLowerCase 方法会导致 TypeError 错误，从而引发死循环。

2. 为什么使用 while(true) 创建循环？

使用 while(true) 可以简化循环条件，将判断逻辑移至循环体内部，使代码更易读。

3. 为什么需要处理空字符串？

用户可能在 prompt 弹窗中输入空格，导致 humanChoice 不为 null，但实际为空字符串。我们需要将这种情况也视为无效输入。

4. return null; 有什么作用？

return null; 会终止函数执行并返回 null 值。在本例中，它用于表示用户没有做出选择。

5. 除了 prompt 函数，还有其他方法可以获取用户输入吗？

是的，你可以使用 <input> 元素创建表单，或者使用第三方库来实现更复杂的交互功能。