JavaScript-запросы СМИ, разбирая greensock

Question

Я пытаюсь создать панель навигации, которая скользит внутрь и наружу при нажатии на JavaScript и Greensock. По какой-то причине действие on click случайно не работает при нажатии на разных размерах, но иногда оно отлично работает.

Мой код ниже, вы можете найти живой пример этой навигации по адресу: http://www.kramergraphicdesign.com/Maura_Website/

var resize = function(){ 
    var viewportWidth = $(window).width(); 
    var lastLiWith = $('#logo').width(); 

    console.log(openOrShut + " this is the true false var"); 


    if ($(window).width() >= 0 && $(window).width() <= 639) { 


      console.log("mobile"); 
      $("#logo, #close, .arrow-right").click(function() 
      { 
      console.log("mobile-click"); 
      if(openOrShut === false) 
      { 
       TweenLite.to("#custom-nav",".5",{x:viewportWidth-lastLiWith}); 
       openOrShut = true; 
      } 

      else{ 
       TweenLite.to("#custom-nav",".5",{x:0}); 
       openOrShut = false; 
      } 
      }); 

    } 

    else if ($(window).width() >= 640) { 

      console.log("tablet"); 
      $("#logo, #close, .arrow-right").click(function() 
      { 
      console.log("tablet-click"); 
      if(openOrShut === false) 
      { 
       TweenLite.to("#custom-nav",".5",{x:400}); 
       openOrShut = true; 
      } 

      else{ 
       TweenLite.to("#custom-nav",".5",{x:0}); 
       openOrShut = false; 
      } 
      }); 


    } 

    else if ($(window).width() >= 1025 && $(window).width() <= 10000) { 

      console.log("dekstop"); 
      $("#logo, #close, .arrow-right").click(function() 
      { 
      console.log("desktop-click"); 
      if(openOrShut === false) 
      { 
       TweenLite.to("#custom-nav",".5",{x:400}); 
       openOrShut = true; 
      } 

      else{ 
       TweenLite.to("#custom-nav",".5",{x:0}); 
       openOrShut = false; 
      } 
      }); 

    } 
}; 





$(document).ready(resize); 



$(window).resize(function(){ 

resize(); 

}); 

Answer 1

Прежде всего, resize событие может произойти очень много, особенно во время перетаскивания, чтобы изменить размер окна. Это означает две вещи:

1. свести к минимуму объем работы, что вы делаете так быстро бегает, или debounce функцию (например, using Lodash), поэтому он работает только после того, как вы перестанете получать размер события в течение короткого времени.
2. Что еще более важно, вы добавляете новый обработчик clickкаждый раз.

Таким образом, причина, по которой он «случайно» не делает ничего, заключается в том, что всякий раз, когда вы нажимаете, вы фактически запускаете свою функцию для переключения меню много раз, если вы предварительно изменили размер окна вообще. Если это количество раз бывает четным, то нет никакого эффекта.

Есть, вероятно, несколько способов, чтобы исправить это, но вот два:

1. Присоединить обработчик щелчка один раз, но проверьте ширину внутри обработчика, чтобы определить, как далеко, чтобы оживить его/как реагировать по-разному на разные размеры.
2. Прежде чем повторно добавить их, отмените регистрацию существующих событий щелчка (с использованием jQuery's .off()), так что зарегистрирован только один обработчик. Я рекомендую использовать пространство имен событий, чтобы вы могли одновременно отменить регистрацию всего в пространстве имен.

Бонусное наблюдение: ваше условие для ширины планшета означает, что код на рабочем столе никогда не будет работать, потому что для блока планшета нет <= 1024.