Javascript / Jquery 脚本因超时而终止

Question

所以作为一个 python 人，我正在试验 JS 和 Jquery。我编写了这个小脚本来使用 Jquery 幻灯片在 html 页面上折叠\展开菜单栏。我相信这应该可以正常工作，但是它所做的只是将我的浏览器冻结大约 10 秒，然后在控制台中我得到“脚本因超时而终止”。任何人都可以指出我正确的方向吗？

$(document).ready(function(){   
    var Clicked = false; 
    while (true) {
    if (Clicked) {
        $("button").click(function(){
            $("#menu").slideDown();
            $("button").replaceWith("<button type=\"button\">&#8593;</button>");
            Clicked = false;  
        });
     } else {
         $("button").click(function(){
             $("#menu").slideUp();
             $("button").replaceWith("<button type=\"button\">&#8595;</button>");
             Clicked = true;  
         });
     }
    }
});

Answer 1

问题是由于while()循环。在 JS 中，这是一个同步操作，它会阻塞导致浏览器挂起的所有其他线程（包括重要的 UI 渲染器）。这就是为什么您会看到表明操作已终止的警报。

一个更好的方法是只使用一个事件处理程序来切换 的状态#menu和button点击的文本。尝试这个：

$(function() {
  $("button").click(function() {
    $("#menu").slideToggle();
    $(this).html(function(i, h) {
      return h === '?' ? '?' : '?';
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button">&#8595;</button>
<div id="menu">
  Menu...
</div>