Как правильно повесить обработчик на изменения окна браузера?

Question

[Сергей Бурдужа]

У меня есть меню.
Я написал функцию, которая отрабатывает, когда окно браузера меньше 520px.

Все работает.

Но, если, уменьшить окно в режиме разработчика, то меню не открывается.
Если перезагружаю страницу, то все уже работает.

$(function () {
  /*
      https://www.jqueryscript.net/animation/Smooth-Mouse-Wheel-Scrolling-Plugin-With-jQuery-easeScroll.html
      ===========================*/
  $("html").easeScroll({
    frameRate: 60,
    animationTime: 1000,
    stepSize: 90,
    pulseAlgorithm: 1,
    pulseScale: 8,
    pulseNormalize: 1,
    accelerationDelta: 20,
    accelerationMax: 1,
    keyboardSupport: true,
    arrowScroll: 50,
    touchpadSupport: true,
    fixedBackground: true
  });

  let sandwitch = function () {
    let mainMenuList = $('.main-menu-list');

    if ($(window).width() < 520) {
      $(document).on('click', '.sandwitch', function () {
        $(this).toggleClass('sandwitch--active');
        mainMenuList.slideToggle();
      });
    }
  };

  let galleryPopup = function(){
    $('#js-gallery').magnificPopup({
      delegate: 'a', // child items selector, by clicking on it popup will open
      type: 'image',
         // Delay in milliseconds before popup is removed
      removalDelay: 600,

      // Class that is added to popup wrapper and background
      // make it unique to apply your CSS animations just to this exact popup
      mainClass: 'mfp-fade'
    });

  };

  sandwitch();
  galleryPopup();
});


let sandwitch = function () {
  let mainMenuList = $('.main-menu-list');

  if ($(window).width() < 520) {
    $(document).on('click', '.sandwitch', function () {
      $(this).toggleClass('sandwitch--active');
      mainMenuList.slideToggle();
    });
  }
};

$(window).on('resize', function(){
 sandwitch();
});

После того как добавил $(window).on('resize)), при клике на меню, оно открывается и закрывается раз 20 подряд.

Где я накосячил?

Comments

[alex]

у вас на каждый resize вызывается sandwich(), который в свою очередь вешает обработчик клика на document. гуд джоб.

spoiler

[Сергей Бурдужа]

Alex, спасибо за поддержку))

[alex]

Сергей Бурдужа, уберите ресайз вообще, вешаете обработчик клика и в нем уже чекаете размер вьюпорта. если размер тот что вам нужен, меняее соостояние сэндвича и меню.

[Сергей Бурдужа]

Alex, Так я вообще убрал.
Вот ссылка на сайт test.host1670806.hostland.pro

Я же описал проблему, что если открываешь сайт и окно браузера меньше 520, то меню открывается.
Открываешь в полноэкранном режиме и когда просто больше 520, то меню не открывается.

Answer 1

[0xD34F]

При каждом ресайзе у вас вызывается sandwitch, в котором назначается обработчик клика. Отресайзили окно 10 раз - вот вам 10 обработчиков.

Не очень понятно, зачем вообще тут нужно отслеживать ресайз - вешайте обработчик сразу, и уже внутри него проверяйте ширину окна, как-то так:

$(document).on('click', '.sandwitch', function () {
  if ($(window).width() < 520) {
    $(this).toggleClass('sandwitch--active');
    $('.main-menu-list').slideToggle();
  }
});

Comments

[Сергей Бурдужа]

Понятно.
Я убрал функцию resize и внутри функции sandwitch поменял slideToggle

let sandwitch = function () {
    let mainMenuList = $('.main-menu-list');

    if ($(window).width() < 520) {
      $(document).on('click', '.sandwitch', function () {
        if(mainMenuList.is(':visible')){
          $(this).removeClass('sandwitch--active');
          mainMenuList.slideUp();
        }else{
          $(this).addClass('sandwitch--active');
          mainMenuList.slideDown();
        }
      });
    }
  };

и теперь работает.

Спасибо.

[0xD34F]

Сергей Бурдужа, снова странный код. Если ширина окна >= 520, обработчик клика назначен не будет. Неужели вы на 100% уверены, что пользователи не будут менять размеры окна?

[Сергей Бурдужа]

0xD34F, при ширине больше 520px кнопка скрывается и меню показывается без кнопки.
Меньше 520px, меню скрыто.

[0xD34F]

Сергей Бурдужа, ещё раз - при изначальной ширине окна >= 520 у вас не назначается обработчик клика.

[Сергей Бурдужа]

Ни хрена не работает.
Короче так, если открываю страницу, когда окно браузера меньше 520, то при клике открывается меню. Даже если после этого изменяю размер окна браузера.

Если при открытия браузера размер окна больше 520, а делаю окно по-меньше, то при клике на меню ничего не происходит.

[Сергей Бурдужа]

вот ссылка на сайт test.host1670806.hostland.pro

[0xD34F]

Сергей Бурдужа, вы вообще как, нормальный? Я вам ясно сказал - вешайте обработчик клика сразу, и уже внутри смотрите ширину окна. Вместо этого вы сделали какую-то стрёмную хрень. Я вам говорю, что с таким кодом будут проблемы - вы меня не слушаете. Повторяю - вы мне в ответ "ни хрена не работает". ДА НЕУЖЕЛИ, БЛИН??!

[Сергей Бурдужа]

0xD34F, Так вот, я повесил, так с самого начала было

let sandwitch = function () {
    let mainMenuList = $('.main-menu-list');

    if ($(window).width() < 520) {
      $(document).on('click', '.sandwitch', function () {
        if(mainMenuList.is(':visible')){
          $(this).removeClass('sandwitch--active');
          mainMenuList.slideUp();
        }else{
          $(this).addClass('sandwitch--active');
          mainMenuList.slideDown();
        }
      });
    }
  };

resize убрал, ее вообще в коде нету.

Я же описал проблему, что если открываешь сайт и окно браузера меньше 520, то меню открывается.
Открываешь в полноэкранном режиме и когда просто больше 520, то меню не открывается.

Я же ссылку вам кинул.

[alex]

Сергей Бурдужа, ну ты и тугой, dude

[0xD34F]

Сергей Бурдужа, или вы издеваетесь, или мне стоит запомнить вас как сумасшедшего идиота.

[Сергей Бурдужа]

0xD34F, в смысле, издеваюсь?

[Сергей Бурдужа]

0xD34F, идете в режим разработчика, sources, assets js main.js и там нету ресайза, причем тут издеваюсь?
Мне не до шуток

[Сергей Бурдужа]

0xD34F, все, я понял. извините, щас исправлю))

Answer 2

[alex]

;(function(){
  function toggleMenu() {
    if ($(window).width() < 520) {
      $('.sandwitch').toggleClass('sandwitch--active');
      $('.main-menu-list').slideToggle();
    }
  }

  function bindEvents() {
    $(document).on('click', '.sandwitch', toggleMenu);
  }

  function init() {
    toggleMenu()
    bindEvents()
  }

  init()
})();

Answer 3

[Andrey Suha]

При каждом ресайзе добавляется обработчик

$(document).on('click', '.sandwitch', function () {
      $(this).toggleClass('sandwitch--active');
      mainMenuList.slideToggle();
    });

Вам нужно или использовать флаг который будет указывать на то есть уже обработчик клика или нету или каждый раз вызывать
$(document).off('click', '.sandwitch')
Перед тем как навесить обработчик.

Надеюсь я Вас не запутал))

Comments

[Сергей Бурдужа]

Извините, я просто придурок)) Как же я сразу не додумался так сделать, а херней страдаю?))