JQuery 애니메이션 onClick 브라우저 크기에 따라

Question

필자는 몇 주 동안 아래 코드를 해결하려고 노력했지만 잘못된 점을 파악하지 못했습니다. 아래 아이콘은 아이콘이 선택되었을 때 왼쪽에서 메뉴 안팎으로 슬라이드하고, 요소를 Facebook 앱처럼 오른쪽으로 바꿔 놓습니다. 그러나 브라우저의 크기에 따라 약간 다릅니다 (페이지의 다른 요소가 필요합니다). 그것은 문서에 준비가 잘 작동하지만 브라우저 크기를 조정할 때 여러 번 슬라이드를 시도하고 여러 번 크기에 따라 올바른 슬라이드 기능을 수행하지 않습니다. 누구든지 조언 할 수 있습니까? 어쩌면이 같은

var menuInitialized = false; 

function doMenu() { 

$(".c_left, .top_right, .c_right, .c_myaccount, .header_image, .c_footer, .copyright, .accepts, .myaccount, .header_logo").removeAttr('style'); 

var $menu = $(".c_left"); 
var width = $(window).width(); 
var status = 'closed'; 

if (width < 550) { 
    if (!menuInitialized) { 
     $('.icon-menu-2').on('click', function(event) { 
      alert('small'); //test which is being activated onclick 
      if (status === 'closed') { 
       $menu.animate({ 
        width: 185, 
        marginLeft: 0, 
        display: 'toggle' 
       }, 'fast'); 
       $(".top_right, .c_right, .c_myaccount, .c_footer, .copyright, .accepts").animate({ 
        marginLeft: 185, 
        display: 'toggle' 
       }, 'fast'); 
       $(".myaccount").animate({ 
        marginRight: -185, 
        display: 'toggle' 
       }, 'fast'); 
       return status = 'open'; 
      } else if (status === 'open') { 
       $menu.animate({ 
        width: 0, 
        marginLeft: -185, 
        display: 'toggle' 
       }, 'fast'); 
       $(".top_right, .c_right, .c_myaccount,.c_footer, .copyright, .accepts").animate({ 
        marginLeft: 0, 
        display: 'toggle' 
       }, 'fast'); 
       $(".myaccount").animate({ 
        marginRight: 0, 
        display: 'toggle' 
       }, 'fast'); 
       return status = 'closed'; 
      } 
     }); 
     menuInitialized = true; 
    } 
} else if ((width < 800) && (width > 550)) { 
    if (menuInitialized) { 
     $('.icon-menu-2').on('click', function(event) { 
      alert('large'); //test which is being activated onclick 
      if (status === 'closed') { 
       $menu.animate({ 
        width: 185, 
        marginLeft: 0, 
        display: 'toggle' 
       }, 'fast'); 
       $(".top_right, .c_right, .c_myaccount, .header_image, .c_footer, .copyright, .accepts").animate({ 
        marginLeft: 185, 
        display: 'toggle' 
       }, 'fast'); 
       $(".myaccount, .header_logo").animate({ 
        marginRight: -185, 
        display: 'toggle' 
       }, 'fast'); 
       return status = 'open'; 
      } else if (status === 'open') { 
       $menu.animate({ 
        width: 0, 
        marginLeft: -185, 
        display: 'toggle' 
       }, 'fast'); 
       $(".top_right, .c_right, .c_myaccount, .header_image,.c_footer, .copyright, .accepts").animate({ 
        marginLeft: 0, 
        display: 'toggle' 
       }, 'fast'); 
       $(".myaccount, .header_logo").animate({ 
        marginRight: 0, 
        display: 'toggle' 
       }, 'fast'); 
       return status = 'closed'; 
       } 
      }); 
      menuInitialized = false; 
     } 
    } 
} 
$(document).ready(doMenu); 
$(window).resize(doMenu); 

Answer 1

클릭 기능을 바인딩 해제해야합니다. 예 : $('.icon-menu').unbind('click');

Answer 2

뭔가 :

var timeoutResize; 
$(window).resize(function(){ 
     clearTimeout(timeoutResize); 
     timeoutResize = setTimeout(doMenu,50); 

    }); 

Answer 3

구이의 솔루션이 작동합니다. 대부분의 브라우저에서는 크기 조정 이벤트가 계속 발생합니다. 핸들러에서 수행중인 작업에 따라 핸들러 코드를 실행하기 전에 크기 조정이 완료되기를 기다리는 지연을 도입해야 할 수도 있습니다.