Firefox 上的 JavaScript TinyMCE/jQuery 竞争条件

Question

我有一个网站，其表单使用 TinyMCE；独立地，我使用 jQuery。当我从 Firefox 3(MacOS X、Linux)上的暂存服务器加载表单时，TinyMCE 没有完成加载。 Firefox 控制台出错，提示 t.getBody()返回 null . t.getBody() ，据我从 TinyMCE 文档中了解到，是一个函数，它返回文档的正文元素以检查某些功能。当我使用 Safari 时不会出现问题，当我将 Firefox 与从本地主机运行的同一站点一起使用时也不会出现问题。

原始的、失败的 JavaScript 相关代码如下所示:

<script type="text/javascript" src="http://static.alfa.foo.pl/json2.js"></script>
<script type="text/javascript" src="http://static.alfa.foo.pl/jquery.js"></script>
<script type="text/javascript" src="http://static.alfa.foo.pl/jquery.ui.js"></script>
<script type="text/javascript" src="http://static.alfa.foo.pl/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
  tinyMCE.init({ mode:"specific_textareas", editor_selector:"mce", theme:"simple", language:"pl" });
</script>
<script type="text/javascript" src="http://static.alfa.foo.pl/jquery.jeditable.js"></script>
<script type="text/javascript" src="http://static.alfa.foo.pl/jquery.tinymce.js"></script>
<script type="text/javascript" charset="utf-8" src="http://static.alfa.foo.pl/foo.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    /* jQuery initialization */ });
</script>

我尝试更改脚本加载顺序，移动 tinyMCE.init()<code> call to the <code><script/></code> tag containing <code>$(document).ready()</code> call—before, after, and inside this call. No result. When <code>tinyMCE.init()<code> was called from within <code>$(document).ready()</code> handler, the browser did hang on request—looks like it was too late to call the init function.</code></code></code>

<code>

<p>Then, after googling a bit about using TinyMCE together with jQuery, I changed <code>tinyMCE.init()</code> call to:</p>

<pre><code>tinyMCE.init({ mode:"none", theme:"simple", language:"pl" });
</code></pre>

<p>and added following jQuery call to the <code>$(document).ready()</code> handler:</p>

<pre><code>$(".mce").each( function(i) { tinyMCE.execCommand("mceAddControl",true,this.id); });
</code></pre>

</code>

<code>Still the same error. But, and here's where things start to look like real voodoo, when I added alert(i);</code> before the tinyMCE.execCommand()调用，发出警报，并且 TinyMCE 文本区域已正确初始化。我认为这可能是由于等待用户解除警报而引入的延迟问题，因此我通过更改仍然在 $(document).ready() 处理程序中的调用引入了一秒钟的延迟，如下所示:

setTimeout('$(".mce").each( function(i) { tinyMCE.execCommand("mceAddControl",true,this.id); });',1000);

随着超时，TinyMCE textareas 正确初始化，但它是绕过真正问题的管道胶带。这个问题看起来像是一个明显的竞争条件(尤其是当我在同一个浏览器上考虑这个问题时，但是当服务器在本地主机上时，问题就不会发生)。但是 JavaScript 执行不是单线程的吗？任何人都可以告诉我这里发生了什么，实际问题在哪里，我该怎么做才能真正解决它？

Answer 1

浏览器按照脚本加载的顺序执行脚本，而不是写入的顺序。您的即时脚本——tinyMCE.init(...) 和$(document.ready(...));——可以在文件完成加载之前执行。

因此，问题可能出在网络延迟上——尤其是对于 6 个独立的脚本(每个脚本都需要浏览器和服务器之间的不同 HTTP 对话)。因此，浏览器可能会在 tiny_mce.js 完成解析并且 tinyMCE 完全定义之前尝试执行 tinyMCE.init()。

如果没有 Firebug，get it . ;)
它有一个 Net 选项卡，可以显示加载所有脚本需要多长时间。

---

虽然您可能认为 setTimeout 是管道录音，但它实际上是一个不错的解决方案。我看到的唯一问题是它假设 1 秒将始终修复。快速连接，他们可以看到暂停。连接速度慢且等待时间不够长 - 您仍然会收到错误消息。

或者，您可以使用 window.onload——假设 jQuery 尚未使用它。 (还有人可以验证吗？)

window.onload = function () {
    tinyMCE.init(...);

    $(document).ready(...);
};

---

另外，那是直接复制的吗？

<script type="text/javascript">
  $(document).ready(function(){
    /* jQuery initialization */ }
</script>

它缺少 ) 结尾的 ready:

<script type="text/javascript">
  $(document).ready(function(){
    /* jQuery initialization */ })
</script>

缺少标点符号会造成很多损害。解析器将继续读取直到找到它——搞乱中间的任何东西。