Javascript / Jquery 脚本因超时而终止答案

【问题标题】：Javascript / Jquery script terminated by timeoutJavascript / Jquery 脚本因超时而终止
【发布时间】：2018-10-20 21:18:55
【问题描述】：

所以作为一个 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;  
         });
     }
    }
});

【问题讨论】：

无限的while 循环阻止所有其他浏览器执行。去掉循环，让浏览器等待点击。

标签： javascript jquery slide

【解决方案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>

【讨论】：

谢谢。这样看起来方便多了
没问题，很高兴为您提供帮助

【解决方案2】：

您的while 循环是无限的。它不断进入else 部分并将onClick 事件附加到按钮。我认为您可以通过消除不必要的循环、Clicked 变量并仅使用一个 onClick 事件处理程序来切换菜单来简化您的代码。

我还用 jQuery 的 html() 更改了 replaceWith 方法，它只是将 HTML 代码作为参数，并根据它的可见性将它放在你的按钮内。

$(document).ready(function(){   
    $("button").click(function(){
        $("#menu").slideToggle();
        var thisButton = $(this);
        if (thisButton.is(':visible')) {
            thisButton.html('&#8593;');
        } else {
            thisButton.html('&#8595;');
        }
    });
});

【讨论】：