时间戳

首页 > 解决方案 > Javascript / Jquery 脚本因超时而终止

javascript - Javascript / Jquery 脚本因超时而终止

问题描述

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

标签： javascriptjqueryslide

解决方案

问题是由于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>

推荐阅读