Question

我正在构建一个模块，它将在网站上显示带有ajax调用的横幅。代码有两个主要部分：

以异步方式插入的banner.js。这个javascript进行ajax调用，并将从ajax调用中检索到的横幅插入页面占位符。
网站站长可以将每个横幅占位符插入到页面的任何部分，如下所示：<div id="banner1"></div>

网站管理员可以在管理员中定义最多5个横幅并插入相同数量的占位符。问题是因为banner.js中定义的ajax调用可以在其余的html和占位符加载之前返回横幅。我可以在结束</body>标记之前加载banners.js，但这不是最佳解决方案，因为某些元素可能会延迟DOM解析并且横幅不会如此快地加载。

到目前为止，我找到的唯一解决方案是：

var bannerScriptListener1 = setInterval(function(){ 
  if(jQuery("#banner1").length>0){                                           
    clearInterval(bannerScriptListener1)    
    jQuery("#banner1").html(banners[1].html)
  }
},10) 
var bannerScriptListener2 = setInterval(function(){ 
  if(jQuery("#banner2").length>0){                                           
    clearInterval(bannerScriptListener2)    
    jQuery("#banner1").html(banners[2].html)
  }
},10) 
//same for banner 3,4,5

该解决方案有多糟糕？我使用Google Task Manager工具对其进行了测试，并且客户端内存消耗没有太大差异。但我可能会遗漏一些东西。有没有更好的解决方案？

编辑：我给出了整个html示例来显示问题。我无法控制其他元素，我唯一的控制是控制banner.js，在banner.js中使用ajax调用调用的php文件，我可以告诉网站管理员可以在哪里插入div占位符。 banner.js可以插入头部，但我无法控制哪个优先级顺序。这只是一个非常简单的例子，实际上像Magento这样的平台有更多的文件和脚本，不同的模块可以搞乱。

<html>
  <head>
  <script type="text/javascript" src="banners.js"></script>
  <script type="text/javascript" src="othermodulescript1.js"></script>
  <script type="text/javascript" src="othermodulescript2.js"></script>
  </head>
  <body>
  <div id="banner1"></div>
  <!--Some more elements-->
  <div>lorem ipsum</div>

  <div>lorem ipsum</div>
  <!--Example of script from another module that sometimes takes 3 seconds to load
  I don't have control over this-->
  <script type="text/javascript" src="http://www.example.com/externalscript.js"></script>
  <!--Some more elements-->
  <div id="banner2"></div>
  </body>
</html>

Answer 1

这不是个好主意。如果进行AJAX调用，可以使用onload-Event将代码放入。

$("#myDiv").load("/ajax.js", function() {
   // do stuff after load complete
   console.log("done loading ajax.js");
});

如果您使用PHP放置代码，另一个想法是：

<script>
function loadComplete() { console.log("load complete."); }
</script>
<script src="filetoload.js" onload="loadComplete();"></script>

Answer 2

您至少可以通过生成一个jQuery插件来处理加载来清理代码。

这是重复使用代码的最简单方法。

＆＃13;

// File: jquery.script-listener.js
(function($) {
  $.fn.scriptListener = function(options) {
    var $target = $(this);
    var config = $.extend({
      onLoadSetValue : null,
      delay : 1000
    }, options);
    var pid = setInterval(function() {
      if ($target.length > 0) {
        clearInterval(pid);
        $target.html(config.onLoadSetValue ? config.onLoadSetValue() : '');
      }
    }, config.delay);
  }
})(jQuery);

// File: banners.js
var banners = [
  { html : '<h1>Hello World #1</h1>' },
  { html : '<h1>Hello World #2</h1>' },
  { html : '<h1>Hello World #3</h1>' },
  { html : '<h1>Hello World #4</h1>' },
  { html : '<h1>Hello World #5</h1>' }
]; // Returned from AJAX call.

// Loop over all possible banners.
for (var i = 0; i < banners.length; i++) {
  $('#banner-' + (i + 1)).scriptListener((function(id) {
    return {
      onLoadSetValue : function() {
        return banners[id].html;
      },
      delay : 10
    }
  })(i));
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="banner-1"></div>
<div id="banner-2"></div>
<div id="banner-3"></div>
<div id="banner-4"></div>
<div id="banner-5"></div>

＆＃13;

Javascript等到使用setInterval加载元素？

2 个答案: