window.resize 함수를 작성하는 방법에 대한 조언?

Question

브라우저 창 크기를 조정할 때 일부 요소의 CSS 너비를 조정하는 함수를 작성하려고하는데 지금 당장은 제대로 된 일이없는 것 같아요. 코드는 지금까지 있습니다 :

function windowResize() { 
      $('#content').css('width', $windowWidth); 
      $('#div.mySection').css('width', $windowWidth); 
      $('#div.mySection .story').css('width', $windowWidth); 
     } 

$(document).ready(function() { 

      var $windowWidth = $(window).width();    

      $(window).resize(function() { 
       windowResize(); 
      }); 

     }); 

임 확실하지 나는 그것의 올바른 위치에 모든 것을 배치 한 경우, 누군가가 나는 그것이 좋은 것이 코드는 훨씬 더 할 수있는 방법에 나에게 조언을 할 수 있다면. 항상 같은 값이 될 수 있도록

감사 카일

Answer 1

윈도우 크기가 변경 될 때 실행중인 함수의 내부에 window의 새 치수를 다시 계산해야합니다. 그렇지 않으면 같은 너비가 영원히 반복되어 감을 것입니다. (또한, 당신 $windowWidth 변수가 현재 사용되지 않는 이유는 네 windowResize 기능의 범위를 벗어난다.) 관례

function windowResize() { 
     var windowWidth = $(window).width(); 
     $('#content').css('width', windowWidth); 
     $('#div.mySection').css('width', windowWidth); 
     $('#div.mySection .story').css('width', windowWidth); 
    } 

$(document).ready(function() { 

     var $windowWidth = $(window).width();    

     $(window).resize(function() { 
      windowResize(); 
     }); 

    }); 

JQuery와 오브젝트 기억 변수 $로 시작되므로 그 삭제 windowWidth에서 일반 일반 번호입니다.

코드에 대한주의 사항은 다음과 같습니다. resize은 특정 브라우저에서 지속적으로 실행되므로 처리기를 지속적으로 실행하게되므로 매우 나쁜 일일 수 있습니다. 시도해보십시오 Ben Alman's throttle/debounce plugin; 주어진 간격 동안 실행을 "디 바운싱 (debouncing)"또는 "스로틀 링 (throttling)"한 번 처리기가 호출되는 횟수를 제한합니다. 그렇게하면 스팸없이 DOM 요소로 크기를 조정하지 않고도 효과를 얻을 수 있습니다. 이는 고통스럽고 UI를 잠그는 좋은 방법입니다.

Answer 2

는 한 번 $windowWidth를 캐싱하고 있습니다. windowResize 함수의 시작 부분에 var $windowWidth = $(window).width();을 이동하면 코드가 작동합니다.

window.onresize = function(){ 
    var width = $(window).width(); 
    $('#content').css('width', width); 
    $('#div.mySection').css('width', width); 
    $('#div.mySection .story').css('width', width); 
} 

domready 기능에이 포장 또는 이벤트를 첨부 할 jQuery를 사용할 필요를 (그러나 그렇게하는 것은 문제가되지 않습니다) :

Answer 3

이 같은 그것을 시도하지 않을 것이다.

정확하게 문제가 무엇인지 명시하지 않았습니다. (이벤트가 실행되지 않습니까? 잘못된 결과가 나옵니까?)하지만 주된 변경 사항은 크기 조정 함수 내에서 폭 계산을하는 것입니다. 그렇지 않으면 한 번만 계산하고 아무런 효과가없는 변수를 다시 계산할 것입니다.)