延迟脚本加载

Question

如果我有以下情况：

<script type="text/javascript" src="offsite file I am referencing"></script>

我只是想延迟使用 settimeout 调用该文件的执行，我该怎么做？

很奇怪，在一个简单的函数上使用 settimeout 没有问题，但在这种看似更简单的情况下，我有点难过。

我的想法是我可以创建一个函数，在 x 时间后调用该文件，但在函数中调用该文件似乎让我无法理解。

Answer 1

你快到了。

在您的 settimeout 回调函数中执行以下操作：

var script = document.createElement('script');
script.src = "http://whatever.com/the/script.js";
document.getElementsByTagName('head')[0].appendChild(script);

Answer 2

最简单的方法是让脚本文件正常加载，然后使用setTimeout() 在其中调用一个主函数，如下所示：

<script type="text/javascript" src="offsite file I am referencing"></script>
<script type="text/javascript">
setTimeout(executeMainFunction, 5000);    // function in offsite js file
</script>

如果由于某种原因你不能这样做，那么你可以像这样延迟加载外部脚本文件：

setTimeout(function() {
    var headID = document.getElementsByTagName("head")[0];         
    var newScript = document.createElement('script');
    newScript.type = 'text/javascript';
    newScript.src = 'http://www.somedomain.com/somescript.js';
    headID.appendChild(newScript);
}, 5000);

这是一篇关于动态加载脚本文件（和其他类型的资源）的参考文章：http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS。

Answer 3

您可以使用 DOM 操作在运行时创建新的脚本标签。将其添加到文档中将加载外部 JS 文件，就像您首先将其写入 HTML 一样。

var loadScript = function(sourceSrc){
    var scriptTag = document.createElement('script');
    scriptTag.src = scriptSrc;
    document.getElementsByTagName('head')[0].appendChild(scriptTag);
}

Answer 4

如果本练习的目的是延迟加载外部资源以模拟潜在的现实生活场景（例如，加载第 3 方小部件时等），那么我会走一条截然不同的路线。

以下是两种不同的延迟代理实现，可用于模拟和测试意外的网络条件：

• http://www.deelay.me/

• https://www.npmjs.com/package/grunt-connect-delay

它们都通过使用像/delay/5000/ 这样的前缀来指定延迟模拟周期。

Answer 5

Mozilla 开发者网络解释了各种方法：

MDN Async Script Techniques

<script async src="file.js"></script>

或

var script = document.createElement('script');
script.src = "file.js";
document.body.appendChild(script);

或者如果您的 JavaScript 在字符串中：

var blob = new Blob([codeString]);
var script = document.createElement('script');
var url = URL.createObjectURL(blob);
script.onload = script.onerror = function() { URL.revokeObjectURL(url); };
script.src = url;
document.body.appendChild(script);

当异步不是异步以及如何解决这些情况时，还有很好的信息。

Answer 6

您可以使用HTML script defer attribute：延迟脚本加载，直到页面加载完毕：

<script src="offsite file I am referencing" defer></script>

Answer 7

我为 ReactJS 创建了它，它为我工作。

1.文件：widget.js with promise：

const delayTime = 20000; // loading 20sec delay.

const loadJS = async () => {
    return await new Promise(function (resolve, reject) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.async = true;
        script.src = 'https://yoururl.com/js/widget.js';
        script.onload = resolve;
        script.onerror = () => {
            reject('Cannot load js')
            document.head.removeChild(script);
        }
        document.head.appendChild(script);
    }) }

function initLoadJS() {
    loadJS()
    .then(()=> console.log('testing'))
    .catch((error)=>console.error(error)) }

function delayLoadingJS() {
    setTimeout((event)=>initLoadJS(event), delayTime); 
} 
export default delayLoadingJS;

2。在页面调用delayLoadingJS()函数：

当页面加载完成后 20 秒后 initLoadJS() 方法将触发，并在页面上附加第 3 方 javascript 文件(https://yoururl.com/js/widget.js)。

componentDidUpdate(prevProps, prevState) {
    if (this.state.page !== prevState.page) {

      delayLoadingJS();
    }
}