Javascript 延迟脚本加载

因此，如果我有以下几点：

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

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

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

非常奇怪的是，在一个简单的函数上使用settimeout不会有任何问题，但在这种看似更简单的情况下，我有点不知所措

---

我的想法是，我可以创建一个函数，在x个时间段后调用该文件，但在函数中调用该文件似乎让我不知所措。

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

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

你就快到了

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

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

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

---

最简单的方法是让脚本文件正常加载，然后用

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);

---

这里有一篇关于动态加载脚本文件（和其他类型的资源）的参考文章：。

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

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

它们都使用前缀

/delay/5000/

来指定延迟模拟周期。

Mozilla Developer Network解释了各种方法：

或者，如果您的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);

---

当async不是async时，还有一些很好的信息，以及如何避开这些情况。

您可以使用以下命令延迟脚本加载，直到页面完成加载：

---

我已经为ReactJS创建了它，它对我很有用

1。文件：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;

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

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;

页面加载完成后，20秒后将触发initLoadJS（）方法，并在页面上附加第三方javascript文件（）

---

谢谢，我基本上已经解决了这个问题，但我不能很快回到这里更新！！在使用jQuery和promises找到我真正想要的答案之前，我偶然发现了这个anwser：我只是好奇；你想用这个达到什么目的？这纯粹是实验吗？

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

      delayLoadingJS();
    }
}