CODEWITHSUNDEEP
javascriptjquerycrashdrupal-8responsive-navigation
Axel Stone
Axel Stone

Reputation: 1580

Why this .js script stops working and is causing a browser freeze?

I've downloaded this Drupal 8 template and the site is at www.plotujeme.sk. It has an responsive navigation with this .js script:

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();
  }
}

and:

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

    sidebar_menu();

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

Problem is, that if I open responsive navigation by clicking on hamburger button, it works several times and then it stops working, the page and a browser freezes or is unresponsive for a long time. I also noticed that (even in template preview) sometimes it does not work at all and nothing happens after clicking hamburger icon. When I resize window multiple times sometimes it works sometimes not.

Do you see any error in the script that could possibly cause this problem?

Update: I also tried to use jQuery('.easy-sidebar-toggle').off("click"); just before jQuery('.easy-sidebar-toggle').on("click", function() {...}); but got the same results.

Upvotes: 1

Views: 136

Answers (2)

Hugo G
Hugo G

Reputation: 16496

I think the reason might be the following lines in the resize handler:

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

They are run every time the window is resized by even one pixel, so a few dozen times a second if you drag the window border. Not sure about the first line, whether it adds the class over and over, but the second line certainly adds an event handler multiple times and fills up the stack. That's the reason your browser freezes. It just can't process the hundreds of registered events.

Just a guess, though.

Upvotes: 0

Anmol Mittal
Anmol Mittal

Reputation: 853

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

As a result, whenever sidebar_menu function changes the window size, this function is called again and again, like a recursion, hence the freezing

Upvotes: 1

Related Questions