发送ajax请求的`ajax:send`事件和`click`事件的区别答案

【问题标题】：Difference `ajax:send` event and `click` event that send ajax request发送ajax请求的`ajax:send`事件和`click`事件的区别
【发布时间】：2013-12-20 15:15:01
【问题描述】：

我在这样的rails中使用带有coffee的ajax请求。

  $('#reload').on(
    'click': -> $('#response').html "<div class='panel'><img src='assets/load.gif'/></div>"
    'ajax:success': (data, res, xhr) ->
      $('#response').html res
  )

这段代码工作正常，但是当我将click 事件更改为ajax:send 事件（我认为它更恰当地代表了我正在做的事情。）时，代码的工作方式几乎没有什么不同。

panel 在点击后出现，但加载图像仅在 2 或 3 秒后出现。这次我将像以前一样使用click 事件。但我想知道为什么会发生这种情况以避免我将来的错误。

【问题讨论】：

嗯，它们是两个不同的事件。它们在代码执行期间的不同时间点被触发。预计它们会略有不同。
我同意，使用ajax:send 似乎更合乎逻辑。加载 load.gif 时会有延迟似乎很奇怪，这并不能通过触发 ajax:send 和 click 的不同时间来解释。这种情况会持续发生吗？
是的，我在使用 mac 时遇到过这种情况，我确认在 ubuntu 环境中也会发生这种情况。但我发现这种延迟出现的原因与某种 turbolinks 行为有关。

标签： javascript jquery ruby-on-rails ajax coffeescript

【解决方案1】：

图片出现延迟是因为我使用了错误的turbolinks。

我的整个代码都是这样的。

$ ->
  $('#reload').on(
    'ajax:send': -> $('#response').html "<div class='panel'><img src='assets/load.gif'/></div>"
    'ajax:success': (data, res, xhr) ->
      $('#response').html res
  )

我将$ -> 重写为ready = -> 并添加了此代码，然后延迟不再发生。

$(document).ready(ready)
$(document).on('page:load', ready)

【讨论】：

【解决方案2】：

你也可以使用 ajax:before

$('#reload').bind('ajax:before', function() {
   $('#response').html("<div class='panel'><img src='assets/load.gif'/></div>"); 
});

【讨论】：