如何延迟执行内联JavaScript命令

Question

Main.php

<script>
$.ajax({
    type: 'GET',
    url: 'ajax.php', 
    context: document.body,
    success: function(data) {
        $("#content").html(data);
    }
});
</script>

<div id="content"></div>

ajax.php

<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script>
$(function(){
    tinymce.init({selector:'textarea'});
    alert("script executed");
});
</script>
<textarea>Your content here.</textarea>

主页面将ajax页面加载到“content”容器中。 ajax页面包含文本区域字段，这些字段将由tinyMCE插件填充。

当在现代浏览器上测试时，一切都很正常。 但是，在像IE 8、9、10和Firefox 19这样的旧浏览器上，我会收到错误消息，指出“未定义'tinymce'”。但是，如果从同一服务器加载tinymce.min.js，则一切都正常。

似乎旧的浏览器不会加载跨域脚本。 但是，当我进一步测试时，我发现这是由于浏览器在加载tinymce.min.js之前执行内联脚本造成的。

那么，我如何使内联脚本在所有脚本加载完后最后执行？或者，是否有其他方法可以使其正常工作？

谢谢。

- user1995781

---

你不能自己托管JS文件吗？ - Neel

@Neel 我希望它从公共CDN加载，因为这样会更快。 - user1995781

Answer 1

问题在于jQuery.ajax调用会剥离传入的脚本标签，并异步加载所引用的脚本并立即执行内联脚本，导致它们顺序错误。为了解决这个问题，您可以使用jQuery来加载依赖项，并将初始化代码放在成功回调中。

将ajax.php更改如下：

<script>
    $.getScript("http://tinymce.cachefly.net/4.0/tinymce.min.js", function() {
        tinymce.init({selector:'textarea'});
        alert("script executed");
    });
</script>
<textarea>Your content here.</textarea>

更多信息请参见jQuery文档。

注意：如果您需要多次执行此操作，则会加载多个tinymce库，这是不好的。也许在您的main.php中只加载一次tinymce会更好。

- Jack Allan

Answer 2

在您的情况下，您可以将您的代码放在window.onload中。

window.onload = function(){
   // this will fire only when all the resources including scripts, images are loaded.
}

- Amit Joki

---

可以做到。但是如果脚本需要超过5秒才能加载呢？如果脚本被缓存，用户每次访问页面仍然需要等待5秒钟。 - user1995781

使用等待时间来加载脚本并不是一个好的建议。最好的方法是知道何时脚本或请求已经完成。 - Jaime García Pérez

@AmitJoki，移除setTimeout版本，它完全是错误的！ - Kiril

window.onload 不关心从其他页面加载的脚本。这根本行不通。 - Reinstate Monica Cellio

Answer 3

如果您没有动态加载脚本或将其标记为延迟或异步，则脚本将按照在页面中遇到的顺序加载。无论是外部脚本还是内联脚本，它们都会按照在页面中遇到的顺序执行。在外部脚本之后出现的内联脚本会被保留，直到先于它们的所有外部脚本都已加载和运行。

异步脚本（无论如何指定为异步）以不可预测的顺序加载和运行。浏览器会并行加载它们，并可以自由地按任意顺序运行它们。

多个异步事物之间没有可预测的顺序。如果需要一个可预测的顺序，则必须通过注册来自异步脚本的加载通知并在适当的时候手动排序JavaScript调用来编码它。

当动态插入脚本标记时，执行顺序的行为取决于浏览器。简而言之，较新版本的Firefox默认将动态添加的脚本标记设置为异步，除非已经设置了脚本标记。

因此，您可能希望下载js文件并将其包含为外部文件。

- coder hacker

---

非常感谢您的回答。您能否请展示一下如何根据我的示例进行异步操作，以便更好地理解？谢谢。 - user1995781

嗨，你正在从外部源加载你的脚本。这是异步行为。因此，你的浏览器会开始下载所有这些外部文件，并继续执行其他脚本。所以你遇到了问题。 - coder hacker