我怎样才能等到新创建的元素“准备好”（下载所有脚本）答案

【问题标题】：How can I wait until a newly created Element is "ready" (all scripts downloaded)我怎样才能等到新创建的元素“准备好”（下载所有脚本）
【发布时间】：2020-01-14 06:48:03
【问题描述】：

我正在编写一段将 Sammy JS（路由器）和 Knockout JS 粘合在一起的代码。

所以，这是我的问题，

<script id="MyTemplate" type="text/html"> 
    // [HTML Containing a script link (Encoded HTML)]
</script>`

我使用 jQuery 来创建这个模板的一个实例：

var TInstance = $($("#MyTemplate").text())

然后，我想将新的 html TInstance 注入到我的 <body> 或其他现有标签中

$("body").html(TInstance)

很好，现在我想做ko.applyBindings 将新的TInstance 绑定到ViewModel 并且它可以工作。

我遇到的问题是：当我在TInstance 中有一个<script src="..." /> 时，我想等到该脚本被下载并解析，然后执行ko.applyBindings。

所以我尝试了$(TInstance).ready(() => {ko.applyBindings(...)})，它在第一次加载页面时工作，但如果我重做整个过程，在新的TInstance 上换入新的TInstance 就绪处理程序不会触发。

我该怎么办？

【问题讨论】：

标签： javascript jquery html knockout.js

【解决方案1】：

好的，这个答案不会是“复制粘贴和播放”，它需要你进行一些调整，但我认为你会明白这个概念并且你会管理。

不添加依赖管理模块，也不重构代码（通常纯脚本标签不会与 html 一起动态注入，原因与您现在遇到麻烦的原因相同。使用 html 加载脚本标签是个好主意第一个页面加载，但以后添加的任何内容，特别是如果需要一些流程，将需要程序化处理，因此需要用于大型项目的模块管理框架）

一种方法是停止您的代码执行流程并轮询环境以查看您的脚本是否已加载。即：

    var demoInterval = setInterval(function(){          
        if(myCondition){
            clearInterval(demoInterval );
            functionThatStartsTheRestOfTheLogicFlow();  // this could apply bindings etc etc
        }
    },50);

现在，例如，如果您使用脚本标签加载 jQuery，您的条件可能是 typeof($) !== '未定义' 它会每 50 毫秒轮询一次，直到 $ 被定义，然后它会调用一个函数来清除轮询并继续你的逻辑流程。

在您的情况下，条件可能是函数/模型的定义，您的自定义 js 文件可以设置的类似标志的变量，轮询期望在某个时候读取等等。

更好的办法是从 html 中删除 script 标签并通过 javascript 动态加载脚本，以便您可以利用所需特定脚本的 onload 事件，您可以阅读示例here。以编程方式控制这些情况对开发人员来说要容易得多。

希望对你有帮助

【讨论】：

【解决方案2】：

已通过使用 0ms setTimeout 调用解决了问题

setTimeout(() => { /*all new resources have been loaded and the html rendered*/ });

帮助：https://eager.io/blog/how-to-decide-when-your-code-should-run/

【讨论】：

我不确定这是否能解决您的问题。您在本地开发时可能已经解决了它，但是对于不与本地服务器通信并且必须支付时间成本来下载资源的用户，这可能无法正常工作。 setTimeout 并不能保证你想要的资源会按时加载，它所做的只是稍后推送一些操作。您需要严格处理加载内容并准备就绪的时间，而不是“猜测等待多少时间就足够了”，因为这会因用户而异
是的，确实如此。如果可以，请提供更好的解决方案，我仍在寻求改进我的解决方案。谢谢。
你有某种框架来管理依赖关系吗？像 requirejs、webpack 或 smthing？如果不是，您将不得不手动将这些操作与 javascript 同步，它可能看起来不漂亮，但它会完成工作..
不，没有模块管理工具，或者...，只有 MVC 4 在后端和纯 Js 文件。您能否详细说明“用 js 做”部分，谢谢。
好的。脚本是某个特定的库还是某个自定义 js 文件？