jquery：如果不存在警报，则按需插件加载失败答案

【问题标题】：jquery: on demand plugin loading fails if alert not presentjquery：如果不存在警报，则按需插件加载失败
【发布时间】：2011-02-25 17:20:15
【问题描述】：

我正在使用jQuery Loader 插件按需加载文件-tagit 插件。

问题是，如果我在加载时触发的回调函数中添加alert，加载的插件似乎可以工作，如果我删除alert，插件就会失败。

任何想法为什么会发生这种情况？

$(document).ready(function(){    
   $("#mytags").Loader(
                {
                    url: [
                        'media/plugins/tagit/css/jquery-ui/jquery.ui.autocomplete.custom.css',
                        'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js',
                        'media/plugins/tagit/js/jquery-ui/jquery-ui-1.8.autocomplete.min.js',
                        'media/plugins/tagit/js/tag-it.js'
                    ],
                    success: function(target) {
                        //alert('loaded');                  
                         $(target).tagit({
                            availableTags: ["tag1","tag2", "tag3"],
                            values: ["tag2"]
                        });
                    }
                }
 });

我在我的本地 XAMP 环境中对此进行测试。

【问题讨论】：

这似乎是一个heisenbug - 一个在观察时消失的错误。是否可以在jsFiddle中重现？
@rsp: 哈哈.. 我喜欢 heisenbug 这个词。
@rsp：看起来，确实，它是一只黑森虫……jsfiddle.net/goliatone/r7MgY/3843
@goliatone：您是否尝试使用<link> 和<script> 标签加载所有这些资源并在您的脚本中只运行$(target).tagit({ ... });？
@rsp：是的，如果我包含这样的资源，它确实有效。

标签： javascript jquery jquery-plugins

【解决方案1】：

使用 alert() 阻止代码执行的可能原因是，当 JavaScript 执行停止（包括间隔和超时）时，外部资源（JS、CSS、图像和 xmlhttprequests）可能会完成加载。但是，在 alert() 之后的代码完成之前，这些外部脚本都不会运行，也不会触发 DOM 事件。

alert() 产生影响的示例：http://jsfiddle.net/p9Nff/

【讨论】：

我已经编辑了我发布的代码。原始代码封装在 ready 函数中。我只是在这里复制了问题的实质。

【解决方案2】：

可能与异步有关，您是否尝试强制异步为假？

当警报打开时，脚本有时间加载您的插件。或者就是 Alexey 说的，你的 DOM 还没有准备好，把你的代码放到 $(function(){ /code here/ });

【讨论】：

理论上，我用来管理延迟加载的插件负责异步加载。但也许它没有。你知道通过添加警报代码块是否被强制异步执行吗？
@goliatone 通过添加警报，您只需阻止代码执行，直到单击 OK，它不会强制它异步执行。如果 jQuery Loader 中存在错误，那么您应该会收到错误“对象没有方法标记”。另一种随机尝试：将 $(target).tagit({}) 包装在 setTimeout(function() { ... }, 10) 中。还要检查 $.fn.tagit 是否在调用 success() 时定义。
@Alexey：在 FB 的控制台中，我看到“对象没有方法 tagit”，但不一致。实际用例更复杂，并且正在加载其他脚本。我可以重新排列我的代码，并使用不同的插件来管理延迟加载。在这一点上，如果您不介意在答案中扩展为什么阻止代码执行可能会改变插件的行为，我会将其标记为正确。
@goliatone，用可能的解释更新了我的答案，尽管我怀疑它是否适用于 jQuery Loader 或 Tagit。