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

Question

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

我的问题是 Script#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> -元素不再在里面，小部件已加载并初始化。

希望有帮助。