Сценарий Javascript / Jquery завершен по таймауту

Question

Итак, как парень с питоном, я экспериментирую с JS и Jquery. Я написал этот небольшой скрипт, чтобы свернуть \ развернуть строку меню на HTML-странице, используя слайд Jquery. Я считаю, что это должно работать нормально, однако все, что он делает, это замораживает мой браузер примерно на 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 цикл бесконечен.Он продолжает идти в секцию else и присоединяет события onClick к кнопке.Я думаю, вы можете упростить ваш код, исключив ненужный цикл, переменную Clicked и используя только один обработчик событий onClick для переключения меню.

Я также изменил метод replaceWith с помощью jQuery's html (), который просто принимает HTML-код в качестве параметра и помещает его в вашу кнопку в зависимости от его видимости.

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

Answer 2

Проблема связана с циклом while().В JS это синхронная операция, которая блокирует все остальные потоки (включая, что важно, рендерер интерфейса пользователя), что приводит к зависанию браузера.Вот почему вы видите предупреждение о том, что операция была прервана.

Лучший подход к этому - просто иметь один обработчик событий, который переключает состояние #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>