其他 JS 文件后执行 jQuery 动态加载内容

Question

我正在修改一些内容，这些内容通过另一个脚本（我们称之为脚本#1）动态加载到我的网站上。脚本 #1 加载一些标记和内容，我一直在使用 setTimeout() 函数调用我的脚本（脚本 #2），延迟几秒钟，以等待确保脚本 #1 已执行并且内容存在于 DOM 中。

我的问题是脚本#1 有不同的加载时间，具体取决于服务器负载，并且根据这些因素可能会变慢或变快，而现在，使用 setTimeout() 确保安全，我通常只剩下一秒钟或者两个我的脚本仍在等待被触发并且脚本 #1 已经加载了内容。

如何在 Script#1 成功加载其动态内容后立即执行我的脚本？

我发现this post 似乎确实解决了同样的问题，但是由于某种原因，使用@Matt Ball 在那里布置的 setInterval 函数根本不起作用。我正在使用下面的代码，其中“div.enrollment”旨在在动态加载和执行的 DOM 中找到..

jQuery(window).load(function ($)
  {
      var i = setInterval(function ()
      {
          if ($('div.enrollment').length)
          {
              clearInterval(i);
              // safe to execute your code here
              console.log("It's Loaded");
          }
      }, 100);
  });

任何有关这方面指导的帮助将不胜感激！感谢您的宝贵时间。

Answer 1

看来healcode.js 做了很多事情。 <healcode-widget> 标签中添加了大量标记。

我会尝试在内部添加另一个带有 id 的标签并测试它是否存在：

<healcode-widget ....><div id="healCodeLoading"></div></healcode-widget>

在一个区间内测试healCodeLoading在<healcode-widget>中是否存在：（假设是jQuery）

var healCodeLoadingInterval = setInterval(function(){ 
    var healCodeLoading = jQuery('healcode-widget #healCodeLoading');

    if (healCodeLoading.length == 0) {
        clearInterval(healCodeLoadingInterval);

        // Everything should be loaded now, so you can do something here
    }
}, 100);

healcode.js 应该在初始化期间替换 <healcode-widget></healcode-widget> 中的所有内容。因此，如果您的<div>-元素不再在其中，则该小部件已加载并初始化。

希望对您有所帮助。

Answer 2

如果你只是想加载一些标记和内容然后运行一些脚本，你可以使用 jQuery。您应该在脚本#1 中使用类似以下的内容来运行脚本#2 中的函数

$.get( "ajax/test.html", function( data ) {
    // Now you can do something with your data and run other script.
    console.log("It's Loaded");
});

函数在ajax/test.html被加载后被调用。

希望有帮助