Question

下面有我用JavaScript编写的代码，并且该脚本已在网页上引用。页面加载后，会发生调用JavaScript，并且逻辑操作应在网页上呈现。

现在，脚本正在网页上触发，但是操作未在网页上呈现。但是，如果我在页面控制台上执行脚本，则会发生更改。

<script>
function bannerLoad() {
  var delayAddOn = setInterval(function() {
    if ($(".add-ons").hasClass("current")) {
      if ($('.addons-sidebar.clearfix img').length < 1) {
        $(".addons-container :last").append($('<img>', {
          class: 'img-responsive',
          src: 'https://www.abc.in/content/dam/abc/6e-website/banner/target/2018/06/abc.png'
        }));
      }
      clearInterval(delayAddOn);
    }
  }, 100);
};

window.onload = function() {
  bannerLoad();
};
window.onclick = function() {
  bannerLoad();
};
</script>

任何人都可以检查是否有问题吗？

Answer 1

您需要在页面完全加载后调用脚本，否则该函数将被调用并且找不到DOM元素。

您应该将代码包装在ready函数中：

<script>
    //OPEN THE READY FUNCTION
    $(function(){ 
        bannerLoad(); //Call of your function when the page is fully loaded
        $(window).click(bannerLoad);    
    }); 
    //CLOSE THE READY FUNCTION

    function bannerLoad() {
         var delayAddOn = setInterval(function() 
         {
             if($(".add-ons").hasClass("current"))
             {
                if($('.addons-sidebar.clearfix img').length < 1)
                {

                    $(".addons-container :last").append($('<img>',{class:'img-responsive',src:'https://www.abc.in/content/dam/abc/6e-website/banner/target/2018/06/abc.png'}));

                }

                clearInterval(delayAddOn);
             }
        }, 100);                
    };
</script>

Answer 2

在文档“就绪”之前，无法安全地操纵页面。 jQuery为您检测到这种就绪状态。 $( document ).ready()中包含的代码仅在页面文档对象模型（DOM）准备好执行JavaScript代码后才能运行。一旦整个页面（不仅是DOM）准备就绪，$( window ).on( "load", function() { ... })中包含的代码都将运行。

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
    bannerLoad(); 
    $(window).click(bannerLoad);   
});

function bannerLoad() {
         if($(".add-ons").hasClass("current"))
         {
                if($('.addons-sidebar.clearfix img').length < 1)
                {

                    $(".addons-container :last").append($('<img>',{class:'img-responsive',src:'https://www.abc.in/content/dam/abc/6e-website/banner/target/2018/06/abc.png'}));

                }
                clearInterval(delayAddOn);
             }
        }, 100);                
    };

Answer 3

您的脚本中有一些问题。我将尝试评估它们。

由于bannerLoad是function，所以最后不需要;。没问题，只是一个提示。
如前所述，bannerLoad是一个函数。那么，为什么要再次将函数包装到事件的函数中呢？只需直接传递函数名称，例如window.click = bannerLoad;。请注意，结尾没有括号，您只需输入名称即可。
您的函数将始终创建具有新间隔的新delayAddOn变量。因此，每次单击时，都会启动另一个间隔并在后台运行。如果要这样做，则需要将变量放在函数的外部，以一次只运行一个时间间隔。
使用onload代替jQuery的就绪状态没有任何问题。但这属于您的页面设置以及您的工作。如之前其他人所说，在这里依靠就绪状态会更安全。因为您已经有一个功能，所以可以$(bannerLoad);直接使用它。

var delayAddOn;

function bannerLoad() {
    delayAddOn = setInterval(function() {
        if ($('.add-ons').hasClass('current')) {
            if ($('.addons-sidebar.clearfix img').length < 1) {
                $('.addons-container :last').append($('<img>', {
                    class: 'img-responsive',
                    src: 'https://www.abc.in/content/dam/abc/6e-website/banner/target/2018/06/abc.png'
                }));
            }

            clearInterval(delayAddOn);
        }
    }, 100);                
}

$(bannerLoad);
window.onclick = bannerLoad;

JavaScript未在页面上应用

3 个答案: