javascript - Ajax.Request 的 onComplete 带有缓存内容的 bug

Question

我有一个 Ajax.Request，其中使用 onLoading 和 onComplete 来显示和隐藏加载动画 gif。问题是，每点击 10 次左右，加载动画就无法隐藏，即使 ajax 请求已成功返回，也只是停留在那里。我有许多 div 元素，每个元素都有自己各自的加载动画和带有 Ajax.Request 的 onclick，如下所示:

    <div id="word_block_<%= word_obj.word %>" class="word_block" >
    <%= image_tag("ajax-loader_word_block.gif", :id => "load_animation_#{word_obj.word}",
                    :style => 'display:none') %>
    <a href="#" onclick="new Ajax.Request('/test/ajax_load', 
     {asynchronous:true, evalScripts:true, 
      onLoading:function() {
        Element.show('load_animation_<%= word_obj.word %>')},
      onComplete:function(){
        Element.hide('load_animation_<%= word_obj.word %>')}}); 
        return false;">Click Here</a>  
    </div>

看起来这可能有什么问题吗？也许我应该尝试删除内联 onclick 并使用 javascript 以编程方式添加 onclick ？我真的不知道为什么这种情况不断发生。我正在使用带有 ruby​​ on Rails 的原型(prototype)库。

Answer 1

我发现 onLoading 属性也很不稳定...假设您的查询已经被缓存并且几乎直接返回到您的前端代码。现在我们还假设，由于某种原因，执行 onLoading 方法比执行 onComplete 方法花费的时间更长。最后，让我们疯狂地假设 ajax 是异步的，并且它不会等待 onLoading 方法完成才启动 onComplete 方法。然后你就有了问题的原因!总结: - 请求已发送 - onLoading 方法被触发但由于某种原因尚未启动 - 请求几乎立即返回 - onComplete 方法被触发并立即开始 => 你最终会在 onLoading 开始之前完成 onComplete 方法:你的元素将隐藏然后显示!

作为解决方法，为什么不在创建 Ajax 请求对象之前使用“Element.show('load_animation_<%= word_obj.word %>')}”呢？所以您不依赖 onLoading 方法和随之而来的“异步性”？

此外，我总是将“requestHeaders: [ "If-Modified-Since", "Fri, 31 Dec 1999 23:59:59 GMT"]”添加到我的ajax请求中，以防止请求被缓存，特别是在IE 中缓存的 ajax 请求可能会造成很大的困惑!