어떻게 동적으로 변화하는 요소에서 더 안정적으로 변수를 가져 옵니까?

Question

저는 아직 코딩 초보자입니다. 따라서 수정이 불가능한이 버그로 인해 멈췄습니다. 나는 내 개인 웹 사이트 http://yeemachine.com에서 scrolltop 함수의 특정 임계 값에 도달했을 때 "html content"를 변경하는 끈적한 navbar를 사용하고 있습니다.

이것은 초기 함수를로드하는 데 사용됩니다. 버그는 var = pdr 또는 .class2의 높이를로드하려고 시도 할 때 발생합니다. .class2는 Masonry.js를 사용하여 이미지 세트가있는 div입니다. 때로는 때리거나 맞지 않습니다. 대부분의 경우 첫 번째로드에서 모든 이미지가 서로 겹쳐지면 height가 2000+ px로 높이가됩니다.

$(window).load(function() { 

     var mn = $(".main-nav"); 
    var mns = "main-nav-scrolled"; 
    var hdr = $('#container').height(); 
    var pdr = $('.class2').height(); 
    var gdr = $('.class1').height(); 
    var sdr = $('.hundred').height(); 

    console.log(gdr); 
    console.log(pdr); 

     var windowPosY = $(this).scrollTop(); 

     $(window).scroll(function() { 

     if($(this).scrollTop() > (hdr*.85) && windowPosY < (hdr+(gdr))) 
     { 
      mn.addClass(mns); 
     $(".iconcontainer li a").html("<i class='fa fa-chevron-up'></i><br>Design<br><i class='fa fa-chevron-down'></i>"); 
     $(".iconcontainer li a").css("font-size", "10px"); 

     } 
     if($(this).scrollTop() < (hdr*.85) && windowPosY){ 
      mn.removeClass(mns); 
      $(".iconcontainer li a").html("<i class='fa fa-chevron-up hideicon'></i><br>Richard<br>Yee<br><i class='fa fa-chevron-down'></i>"); 
      $(".iconcontainer li a").css("font-size", "10px"); 

     } 
      if($(this).scrollTop() > (hdr+gdr) && windowPosY < (hdr+gdr+pdr)){ 
       $(".iconcontainer li a").html("<i class='fa fa-chevron-up'></i><br>Painting?<br><i class='fa fa-chevron-down'></i>"); 
       $(".iconcontainer li a").css("font-size", "10px"); 

      } 
      if($(this).scrollTop() > (hdr+gdr+pdr) && windowPosY < (hdr+gdr+pdr+sdr)){ 
       $(".iconcontainer li a").html("<i class='fa fa-chevron-up'></i><br>Sound<br><i class='fa fa-chevron-down hideicon'></i>"); 
       $(".iconcontainer li a").css("font-size", "10px"); 

      } 
     }); 

이 초기로드 기능과 함께 창이 크기가 조정될 때마다 문제를 해결하는 크기 조정 기능이 있습니다.

var resizeTimeout; 

     $(window).resize(function() { 
     clearTimeout(resizeTimeout); 
     resizeTimeout= setTimeout(doneResizing, 500); 
    }); 

     doneResizing(); //trigger resize handling code for initialization 
}); 


function doneResizing() 
{ 

     mn = $(".main-nav"); 
     mns = "main-nav-scrolled"; 
     hdr = $('#container').height(); 
     gdr = $('.class1').height(); 
     pdr = $('.class2').height(); 
     sdr = $('.hundred').height(); 



     $(window).scroll(function() { 
      var windowPosY = $(this).scrollTop(); 
      console.log(gdr); 
      if($(this).scrollTop() > (hdr*.85) && windowPosY < (hdr+(gdr))) 
      { 
       mn.addClass(mns); 
      $(".iconcontainer li a").html("<i class='fa fa-chevron-up'></i><br>Design<br><i class='fa fa-chevron-down'>"); 
      $(".iconcontainer li a").css("font-size", "10px"); 

      } 
      if($(this).scrollTop() < (hdr*.85) && windowPosY){ 
       mn.removeClass(mns); 
       $(".iconcontainer li a").html("<i class='fa fa-chevron-up hideicon'></i><br>Richard<br>Yee<br><i class='fa fa-chevron-down'>"); 
       $(".iconcontainer li a").css("font-size", "10px"); 

      } 
       if($(this).scrollTop() > (hdr+(gdr)) && windowPosY < (hdr+gdr+pdr)){ 
        $(".iconcontainer li a").html("<i class='fa fa-chevron-up'></i><br>Painting?<br><i class='fa fa-chevron-down'>"); 
        $(".iconcontainer li a").css("font-size", "10px"); 

       } 
       if($(this).scrollTop() > (hdr+gdr+pdr) && windowPosY < (hdr+(gdr)+pdr+sdr)){ 
        $(".iconcontainer li a").html("<i class='fa fa-chevron-up'></i><br>Sound<br><i class='fa fa-chevron-down hideicon'>"); 
        $(".iconcontainer li a").css("font-size", "10px"); 
       } 


      }); 

} 

div의 모든 이미지를로드 한 후 높이를 변경하거나 지연시키는 방법이 있습니까? 나는 Stack에서 본 많은 메소드를 시도했지만 올바르게 구현하지 못했다고 생각한다. 내 지저분한 JS가 격자 무늬 이미지를 얻으려면 Masonry를 사용하여 영향을 미치는지 확실하지 않습니다. 나머지 코드는 다음과 같습니다. https://github.com/yeemachine/yeemachine/blob/gh-pages/index.html

고마워요!

Answer 1

경쟁 조건의 대상이 될 가능성이 큽니다. 즉, 코드 j가 실행되기 전에 jason에서 크기 조정 작업을 마치는 경우가 있고 그렇지 않은 경우도 있습니다.

절대적으로 필요한 경우가 아니라면 지연을 추가하여이를 해결하지 마십시오. 지연을 추가한다고해서 문제가 해결되는 것은 아닙니다. 단지 발생 가능성이 적습니다. 대신, 벽돌이 완성되었다고 말한 후 코드를 실행하십시오.

벽돌집 js에는 다소 events that you can hook into이있는 것 같습니다.

layoutComplete 이벤트 코드를 실행하면 문제가 해결되는지 알 수 있습니다. 예 : 다음과 같습니다.

// jQuery 
var $grid = $('.grid').masonry({...}); 

function onLayout() { 
    /* YOUR CODE HERE */ 
} 
// bind event listener 
$grid.on('layoutComplete', onLayout); 

Answer 2

dom 요소를 사용하기 전에 읽으려고 시도하는 중일 때가 있습니다.

dom 요소가있을 때까지 실행을 지연 시키려면 동일한 방법을 간단하게 지연 및 호출 할 수 있습니다.

var $pdr = $('.class2'); 
if ($pdr.length == 0) 
    return window.setTimeout(arguments.callee, 10); 

var pdr = $pdr.height();