在执行脚本之前等待外部的、动态加载的脚本加载答案

【问题标题】：Wait for external, dynamic loaded script to load before executing script在执行脚本之前等待外部的、动态加载的脚本加载
【发布时间】：2023-04-09 20:59:01
【问题描述】：

对于餐厅网站，我需要使用一个很难加载的预订模块。
加载它的脚本需要高达 4 秒的时间，这是在我开始工作的 380mb/s 以太网连接上。网站需要 4 到 6 秒才能正常运行。

这是我必须实现的代码。

<div id="[reservation-company-name]-booknow">
    <script type="text/javascript" src="//www.[reservation-company-name].com/WID/Widget/Cors"></script>
    <script>bookNow({companyID: '[numbers]',target: '#[reservation-company-name]-booknow',language: 'NL'});</script>
</div>

预订小部件隐藏在主页上，但这仍然意味着脚本将在网页时加载。
我知道我必须在页面完全加载后动态加载脚本。

$(window).load(function() {
    $("#[reservation-company-name]-booknow").append("<script type='text/javascript' src='//www.[reservation-company-name].com/WID/Widget/Cors'></script><script>bookNow({companyID: '[numbers]',target: '#[reservation-company-name]-booknow',language: 'NL'});</script>
});

但问题是，当第一个脚本仍在加载时，带有 bookNow 函数的第二个脚本会触发。这会导致错误，并且小部件将无法正确加载。
当我在运行第二个脚本时设置超时时，小部件将加载，但由于连接速度不同，无法设置正确的超时时间。

我在 Stackoverflow 上搜索了如何在执行函数之前等待动态加载的脚本完全加载。我发现的大多数东西都不是关于动态加载的脚本，也不是关于异步和延迟，这对我不起作用。

怎么办？

【问题讨论】：

仅供参考，$(window).load() 已弃用。使用$(window).on('load')。

标签： jquery function dynamic load

【解决方案1】：

好吧，我自己找到了解决方案，只是想把它留在这里让其他人找到，因为我无法在这里轻松找到答案。

Jquery has a nice getScript function 加载脚本然后运行函数。正是我想要的。

$(window).load(function() {
    var url = "//www.[reservation-company-name].com/WID/Widget/Cors";
    $.getScript(url, function() {
        $('#[reservation-company-name]-booknow').append("<script>bookNow({companyID: '686937',target: '#[reservation-company-name]-booknow',language: 'NL'});</script>");
    });
 });

【讨论】：