JavaScript的TinyMCE / jQuery的竞争条件在Firefox上 [英] JavaScript TinyMCE/jQuery race condition on firefox

问题描述

我有一个使用TinyMCE的表单的网站;独立地，我使用jQuery。当我从Firefox 3（MacOS X，Linux）上的临时服务器加载表单时，TinyMCE不会完成加载。在Firefox控制台中有一个错误，说 t.getBody（）返回了 null 。根据我对TinyMCE文档的理解， t.getBody（）是一个返回文档body元素以检查某些特征的函数。问题不会发生，当我使用Safari浏览器，也没有当我使用火狐与本地主机运行相同的网站。

原始的，与JavaScript相关的代码看起来像这样：

 < script type =text / javascriptsrc =http://static.alfa.foo.pl/json2。 JS>< /脚本> 
< script type =text / javascriptsrc =http://static.alfa.foo.pl/jquery.js>< / script> 
< script type =text / javascriptsrc =http://static.alfa.foo.pl/jquery.ui.js>< / script> 
< script type =text / javascriptsrc =http://static.alfa.foo.pl/tiny_mce/tiny_mce.js>< / script> 
< script type =text / javascript> 
 tinyMCE.init（{mode：specific_textareas，editor_selector：mce，主题：简单，语言：pl}）; 
< / script> 
< script type =text / javascriptsrc =http://static.alfa.foo.pl/jquery.jeditable.js>< / script> 
< script type =text / javascriptsrc =http://static.alfa.foo.pl/jquery.tinymce.js>< / script> 
< script type =text / javascriptcharset =utf-8src =http://static.alfa.foo.pl/foo.js>< / script> 
< script type =text / javascript> 
 $（document）.ready（function（）{
 / * jQuery initialization * /}）; 
< / script> 
  

我试着改变脚本加载顺序，移动 tinyMCE.init（）调用包含 $（document）.ready（）的< script /> 在这个电话之前，之后和之内。没有结果。从 $（document）.ready（）处理程序中调用 tinyMCE.init（）时，浏览器确实挂起请求 - 看起来像是为时已晚为调用init函数。



然后，谷歌搜索与jQuery一起使用TinyMCE后，我改变了 tinyMCE.init（）调用：

  tinyMCE.init（{mode：none，主题：简单，语言：pl}）; 
  

并添加了以下jQuery调用 $（document）.ready（） 处理程序：

  $（。mce）。 execCommand（mceAddControl，true，this.id）;}）; 
  

还是一样的错误。但是，当我在tinyMCE.execCommand（）调用之前添加alert（i）; 时，事情开始看起来像是真正的巫术，给出了警报，而TinyMCE textareas被正确初始化。我想这可能是等待用户关闭警报引起的延迟问题，所以我通过改变调用的方式引入了第二个延迟，仍然在$（document）.ready（）处理程序中，如下所示：

pre $ setTimeout（'$（。mce）。each（function（i）{tinyMCE.execCommand（mceAddControl，true，this .id）;}）;'，1000）;

超时之后，TinyMCE textareas正确初始化，但它却是真正的问题。问题看起来像一个明显的竞争条件（特别是当我考虑在同一浏览器，但当服务器在本地主机上，问题不会发生）。但不是JavaScript执行单线程？请问任何人，请告诉我在这里发生了什么事情，实际的问题在哪里，我能做些什么才能真正解决这个问题？

解决方案立即脚本 - tinyMCE.init（...）和 $（document.ready（...） ）; - 可以在文件加载完成之前执行。

所以，这个问题可能是网络延迟 - 尤其是6个独立的脚本每个浏览器和服务器之间需要不同的HTTP会话）。因此，在 tiny_mce.js 完成解析之前，浏览器可能试图执行 tinyMCE.init（），并且 tinyMCE $ b

如果没有Firebug，得到它。 ;）

它有一个 Net 标签，可以显示加载所有脚本的时间。



---

虽然您可能认为 setTimeout 是管道粘贴，但实际上它是一个不错的解决方案。只有我看到的问题是，假设1秒将永远解决。一个快速的连接，他们可以看到停顿。缓慢的连接，它不会等待足够长的时间 - 你仍然会得到错误。

或者，您可以使用窗口。 onload - 假设jQuery尚未使用它。 （其他人可以验证吗？）
$ b $ pre $ window.onload = function（）{
tinyMCE.init（... ）;

$（document）.ready（...）;
};


---

另外，是直接复制吗？

 < script type =text / javascript> 
 $（document）.ready（function（）{
 / * jQuery initialization * /} 
< / script> 
  

$ b

缺少）结尾准备好：

 < script type =text / javascript> 
 $（document）.ready（function（）{
 / * jQuery initialization * /}）
< / script> 
  

缺少标点符号会造成很大的伤害。解析器只是继续阅读直到找到它 - 搞乱了两者之间的任何东西。

I have a website with a form that uses TinyMCE; independently, I use jQuery. When I load the form from staging server on Firefox 3 (MacOS X, Linux), TinyMCE doesn't finish loading. There is an error in Firefox console, saying that t.getBody() returned null. t.getBody(), as far as I understand from TinyMCE docs, is a function that returns document's body element to be inspected for some features. Problem doesn't occur when I use Safari, nor when I use Firefox with the same site running from localhost.

Original, failing JavaScript-related code looked like this:

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

I tried changing script loading order, moving tinyMCE.init() call to the <script/> tag containing $(document).ready() call—before, after, and inside this call. No result. When tinyMCE.init() was called from within $(document).ready() handler, the browser did hang on request—looks like it was too late to call the init function.

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

tinyMCE.init({ mode:"none", theme:"simple", language:"pl" });

and added following jQuery call to the $(document).ready() handler:

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

Still the same error. But, and here's where things start to look like real voodoo, when I added alert(i); before the tinyMCE.execCommand() call, alerts were given, and TinyMCE textareas were initialized correctly. I figured this can be a matter of delay introduced by waiting for user dismissing the alert, so I introduced a second of delay by changing the call, still within the $(document).ready() handler, to following:

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

With the timeout, TinyMCE textareas initialize correctly, but it's duct taping around the real problem. The problem looks like an evident race condition (especially when I consider that on the same browser, but when server is on localhost, problem doesn't occur). But isn't JavaScript execution single-threaded? Could anybody please enlighten me as to what's going on here, where is the actual problem, and what can I do to have it actually fixed?

解决方案

The browser executes scripts in the order they're loaded, not written. Your immediate scripts -- tinyMCE.init(...) and $(document.ready(...)); -- can execute before the files finish loading.

So, the problem is probably network latency -- especially with 6 separate scripts (each requiring a different HTTP conversation between the browser and server). So, the browser is probably trying to execute tinyMCE.init() before tiny_mce.js has finished being parsed and tinyMCE is fully defined.

If don't have Firebug, get it. ;)
It has a Net tab that will show you how long it's taking all of your scripts to load.

---

While you may consider the setTimeout to be duct taping, it's actually a decent solution. Only problem I see is that it assumes 1 second will always fix. A fast connection and they could see the pause. A slow connection and it doesn't wait long enough -- you still get the error.

Alternatively, you might be able to use window.onload -- assuming jQuery isn't already using it. (Can anyone else verify?)

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

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

---

Also, was that a direct copy?

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

It's missing the ) ending ready:

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

Missing punctuation can cause plenty of damage. The parser is just going to keep reading until it finds it -- messing up anything in between.

这篇关于JavaScript的TinyMCE / jQuery的竞争条件在Firefox上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！