Warum funktioniert dieses .js-Skript nicht mehr und verursacht einen Browser-Einfrieren?

Question

Ich habe diese Drupal 8 template heruntergeladen und die Website ist unter www.plotujeme.sk. Sie hat eine ansprechende Navigation mit diesem Skript .js:

function sidebar_menu() { 

    var windowsize = jQuerywindow.width(), 
     jQuerynav = jQuery("nav"), 
     slide = { 
      clear: function() { 
       jQuerybody.removeClass('toggled'); 
       jQuery('.overlay').hide(); 
       jQuery('.easy-sidebar-toggle').prependTo("header"); 
       //jQuery('#search').prependTo("body"); 
       jQuery('.navbar.easy-sidebar').removeClass('toggled'); 
       jQuery('#navbar').removeAttr("style"); 
      }, 
      start: function() { 
       jQuery('.overlay').show(); 
       jQuerybody.addClass('toggled'); 
       jQueryhtml.addClass('easy-sidebar-active'); 
       jQuerynav.addClass('easy-sidebar'); 
       jQuery('.easy-sidebar-toggle').prependTo(".easy-sidebar"); 
       //jQuery('#search').prependTo("#navbar"); 
       jQuery('#navbar').height(jQuerywindow.height()).css({ 
        "padding-top": "60px" 
       }); 
      }, 
      remove: function() { 
       jQuerynav.removeClass('easy-sidebar'); 
      } 
     }; 

    if (windowsize < 1003) { 

     jQuerynav.addClass('easy-sidebar'); 
     jQuery('.easy-sidebar-toggle').on("click", function (e) { 
      e.preventDefault(); 
      if (jQuerybody.hasClass('toggled')) { 
       slide.clear(); 
      } else { 
       slide.start(); 
      } 
     }); 

     /* 
     jQueryhtml.on('swiperight', function() { 
      slide.start(); 
     }); 

     jQueryhtml.on('swipeleft', function() { 
      slide.clear(); 
     }); */ 

    } else { 
     slide.clear(); 
     slide.remove(); 
    } 
} 

und:

jQuery(document).ready(function() { 
    "use strict"; 

    sidebar_menu(); 

    jQuery(window).resize(function() { 
     sidebar_menu(); 
    }); 
}); 

Problem ist, dass, wenn ich mit einem Klick auf Hamburgere Taste ansprechende Navigation zu öffnen, es mehrmals funktioniert und es bleibt dann stehen Arbeiten, die Seite und ein Browser friert ein oder ist lange nicht mehr erreichbar. Ich habe auch bemerkt, dass es (sogar in der Vorlagenvorschau) manchmal gar nicht funktioniert und nach dem Anklicken des Hamburger-Icons nichts passiert. Wenn ich das Fenster mehrmals ändere, funktioniert es manchmal nicht.

Sehen Sie Fehler im Skript, die möglicherweise zu diesem Problem führen können?

---

Update: Ich habe auch versucht jQuery('.easy-sidebar-toggle').off("click"); kurz vor jQuery('.easy-sidebar-toggle').on("click", function() {...}); zu verwenden, aber die gleichen Ergebnisse erhielt.

Answer 1

jQuery(window).resize(function() { 
    sidebar_menu(); 
}); 

Als Ergebnis, wenn sidebar_menu Funktion der Fenstergröße ändert, wird diese Funktion wieder aufgerufen und wieder, wie eine Rekursion, also das Einfrieren

Answer 2

ich der Grund könnte denken, die folgenden Zeilen in der Größe ändern sein Handler:

jQuerynav.addClass('easy-sidebar'); 
jQuery('.easy-sidebar-toggle').on("click", ... 

Sie werden jedes Mal das Fenster von selbst ein Pixel der Größe verändert wird ausgeführt, so dass ein paar Dutzend Mal pro Sekunde, wenn Sie den Fensterrand ziehen. Nicht sicher über die erste Zeile, ob die Klasse immer wieder hinzugefügt wird, aber die zweite Zeile fügt einen Ereignishandler mehrmals hinzu und füllt den Stapel auf. Das ist der Grund, warum dein Browser einfriert. Es kann nur die Hunderte von registrierten Ereignissen nicht verarbeiten.

Nur eine Vermutung, obwohl.