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()调用其中的main函数，如下所示：

<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

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

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

它们都使用类似/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：

<style type="text/css">
    .bootstrap-select .dropdown-toggle:focus {
        outline: none !important;
        box-shadow: none !important;
    }
    :focus {
      outline: none !important;
      box-shadow: none !important;
    }
</style>

2。在页面上调用 delayLoadingJS（）函数：

页面加载完成后，则在20秒后， initLoadJS（）方法将触发并附加页面上的第三方JavaScript文件（https://yoururl.com/js/widget.js）。

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;

延迟脚本加载

7 个答案:

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