带有 livequery 的 JQuery getScript - 异步执行抛出我的结果

Question

我们有一个“实用程序”js 函数，该函数包含在我们网站的多个 js 文件中，因此为了减少代码重复，我们将其移至实用程序文件并修改所有 js 文件以在将其与 getScript 一起使用之前加载它.这在大多数情况下都有效，但是使用 livequery 的一段代码会出错。

我在需要使用新功能的地方成功使用的代码：

$.getScript("js/utilities.js", function(){
   ... use parseQueryString function ....
});

之前的代码：

$('.preview')
    .livequery(function(){
            $(this).attr('rel','myPage.cfm?' + parseQueryString($(this).attr('rel')));
        });

基本上，每当场景中出现具有“预览”类的元素时，我们都希望解析 rel 属性并将其替换为新解析的字符串。

之后的代码：

$('.preview')
    .livequery(function(){
            var preview = $(this);
            // load utilities.js so that we can access the parseQueryString function
            $.getScript("js/utilities.js", function(){
                preview.attr('rel','myPage.cfm?' + parseQueryString(preview.attr('rel')));
            });
        })

问题是，这似乎在执行getScript 调用的回调之前继续到$('.preview').livequery 循环的下一次迭代。因此，preview 变量在我们可以用适当的值替换它的 rel 属性之前被重置。我怎样才能让它正确执行？

Answer 1

我认为你在标题中提到了这个问题 :) '异步' 正是原因 - 加载实用程序是打开的，因为将发出请求并且执行将同时继续..如果更多匹配项进入另一个 livequery 回调可用。坦率地说，我认为将脚本加载放在将被循环多次的函数中是一个非常糟糕的主意——这有点毫无意义。我认为没有理由不像普通脚本一样包含它：

<script src="js/utilities.js" type="text/javascript"></script>

我认为这是最简单最合理的解决方案。 但是，如果由于某种原因您真的不能使用它，请确保通过上下文为回调提供变量的本地副本（请参阅$.ajax context option，因为 getScript 是一个 $.ajax 快捷方式，它也应该有它）或尝试同步 ajax。 ..最后一个是一个选项，但在这种情况下请不要真的尝试:)

Answer 2

我刚想出的一种解决方法似乎可行...将 getScript 调用放在 livequery 循环周围：

 // load utilities.js so that we can access the parseQueryString function
$.getScript("js/utilities.js", function(){
    $('.preview')
        .livequery(function(){
            $(this).attr('rel','myPage.cfm?' + parseQueryString($(this).attr('rel')));
        })
});