如何更可靠地从动态变化的元素中获取变量？

Question

我仍然是编码的新手，因此因为这个我似乎无法修复的错误而陷入停顿。我正在我的个人网站 http://yeemachine.com 上工作，该网站有一个粘性导航栏，当达到 scrolltop 函数中的某个阈值时，它会更改其 "html content"。

这是我用来加载初始函数的。当它尝试加载 var=pdr 或 .class2 的高度时，就会出现错误。 .class2 是 div，其中包含使用 Masonry.js 设置的图像。有时是碰运气。大多数情况下，在第一次加载时，它会将 div 的高度设为 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" );

            }
        });

除了这个初始加载函数之外，我确实有一个调整大小函数，它可以在每次 window 调整大小时修复问题。

    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" );
                }


            });

}

有没有办法delay/get加载完div中所有图片后的高度变量？我已经尝试了很多我在 Stack 上看到的方法，但我想我无法正确实现它们。我不确定我的其他杂乱 JS 是否也影响了它，使用 Masonry 获取网格化图像。这是代码的其余部分：https://github.com/yeemachine/yeemachine/blob/gh-pages/index.html

谢谢！

Answer 1

您可能试图在 dom 元素可用之前读取它，从而导致有时工作有时不工作的竞争条件。

您可以简单地延迟并调用相同的方法来延迟执行，直到出现 dom 元素。

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

var pdr = $pdr.height();

Answer 2

您可能是竞争条件的受害者。即，有时 masonry js 在您的代码运行之前完成调整大小，而其他时候则不会。

除非绝对必要，否则不要通过添加延迟来解决此问题。添加延迟并不能解决问题：它只会它不太可能发生。相反，运行你的代码在砌体之后告诉你它已经完成了。

masonry 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 );

如何更可靠地从动态变化的元素中获取变量？

How do I more reliably get a variable from a dynamically changing element?

javascript

jquery

jquery-masonry

scrolltop