如何在 Javascript 中退出 for 循环？

Posted 2023-03-05

【中文标题】如何在 Javascript 中退出 for 循环？

【英文标题】：How can I exit for loop in Javascript?

【发布时间】：2022-01-09 04:18:46

【问题描述】：

我想这样当用户点击问卷上的一个选项时，他们不能再次点击它。为此，我需要退出“for循环”（在这段代码的末尾），但是当我输入break语句时，它在某种程度上是不正确的。你能告诉我正确的做法吗？非常感谢您的回答！ :)

<script>
   document.addEventListener("DOMContentLoaded", function() 
       function clicked(answer, i) 
           if (answer[i].value == "correct")
           
               answer[i].style.backgroundColor = "green";
               let result = "<p>Correct!</p>";
               document.getElementsByClassName("section")[0].insertAdjacenthtml('beforeend', result);
               return;
           
           else
           
               answer[i].style.backgroundColor = "red";
               let result = "<p>Wrong!</p>";
               document.getElementsByClassName("section")[0].insertAdjacentHTML('beforeend', result);
               return;
           
           
       let answer = document.getElementsByTagName('button');
       for (let i = 0; i < answer.length; i++) 
           answer[i].addEventListener("click", () => 
           
               clicked(answer, i);
           
       );
       
       );
</script>

【问题讨论】：

不要在循环中创建事件处理程序（至少不要在不删除它们的情况下这样做）。您的break 语句可能有效，但您的内存中可能还有 38 个其他事件处理程序继续执行。这给人的印象是break 不起作用。

也许你应该考虑在他们点击按钮后禁用它。

【参考方案1】：

你的逻辑错了……

您的 for 循环正在为您的所有答案设置点击事件，打破它只是意味着您不会在所有答案上添加事件。

你需要做的是：

在第一次点击后（在您的 clicked() 函数中）

删除所有答案上的点击事件

设置一个真/假“hasBeenClickedOn”标志

，您将在 clicked() 函数开始时检查它

例如：

<script>

    var hasBeenClickedOn = false; // global flag

   document.addEventListener("DOMContentLoaded", function() 
       function clicked(answer, i) 
       
            if (hasBeenClickedOn===true)  return false;  // check the flag       
            hasBeenClickedOn = true; // set the flag       
       
           if (answer[i].value == "correct")
           
               answer[i].style.backgroundColor = "green";
               let result = "<p>Correct!</p>";
               document.getElementsByClassName("section")[0].insertAdjacentHTML('beforeend', result);
               return;
           
           else
           
               answer[i].style.backgroundColor = "red";
               let result = "<p>Wrong!</p>";
               document.getElementsByClassName("section")[0].insertAdjacentHTML('beforeend', result);
               return;
           
           
       let answer = document.getElementsByTagName('button');
       for (let i = 0; i < answer.length; i++) 
           answer[i].addEventListener("click", () => 
           
               clicked(answer, i);
           
       );
       
       );
</script>

【讨论】：

我试图回答它，但我认为你的回答更好。干得好！

非常感谢！我明白出了什么问题。