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

Question

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.

There's no specific error in the code, but be aware that the `resize` event fires once for every pixel that the window is resized by. Change the height and width by 200 px, that's potentially 400 times your code runs. I'd suggest looking at debouncing the event, or better yet, use CSS media queries to do what you need. — Rory McCrossan, Jun 05 '17 at 11:21

Anmol Mittal · Answer 1 · 2017-06-05T11:24:52.060

1

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

edited Jun 05 '17 at 11:24

answered Jun 05 '17 at 11:21

Anmol Mittal

843
5
12

Just FYI, it's not recursive at all – Rory McCrossan Jun 05 '17 at 11:22
1

resize event handler calls sidebar_menu which in turn triggers the event – Anmol Mittal Jun 05 '17 at 11:23
Exactly. That's not recursion. – Rory McCrossan Jun 05 '17 at 11:24
1

Yeah , it is not calling itself, i meant flow similiar to recursion – Anmol Mittal Jun 05 '17 at 11:25

Hubert Grzeskowiak · Answer 2 · 2017-06-05T11:27:03.690

0

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.

edited Jun 05 '17 at 11:27

answered Jun 05 '17 at 11:24

Hubert Grzeskowiak

15,137
5
57
74

I have tried to use `jQuery('.easy-sidebar-toggle').off("click");` right before these two lines of code but no results. – Axel Stone Jun 05 '17 at 11:26
Okay, in this case ignore my answer. If I were you, I could include a few breakpoints or console prints to see what is called where how many times. – Hubert Grzeskowiak Jun 05 '17 at 11:30

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

2 Answers2