Javascript 区别是发送ajax请求的`ajax:send`事件和`click`事件

我在rails中使用ajax请求和

coffee

，如下所示

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

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

$（'#重新加载'）。打开(
'单击'：->$（'#响应'）.html“”
“ajax:success”：（数据、res、xhr）->
$（'#response'）.html res
)

这段代码工作得很好，但是当我将

单击

事件更改为

ajax:send

事件（我认为它更恰当地代表了我正在做的事情）时，代码的工作方式就没有什么不同了

单击后会出现

面板

，但加载图像仅在2秒或3秒后出现。

---

我将在这次

中像以前一样使用click

事件。但是我想知道为什么会发生这种情况，以避免我将来犯错误。

图像出现延迟是因为我错误地使用了TurboLink

我的整个代码是这样的

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

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

---

您还可以使用ajax:before

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

$（'#reload'）.bind（'ajax:before'，function（）{
$（'#response'）.html（“”）；
});

嗯，这是两个不同的事件。它们在代码执行期间的不同时间点被触发。我同意，使用

ajax:send

似乎更符合逻辑。加载load.gif时会出现延迟，这似乎很奇怪，但触发

ajax:send

和

click

的时间不同并不能解释这一点。这种情况持续发生吗？是的，我在使用mac时遇到过这种情况，我确认在ubuntu环境中也会发生这种情况。但我发现这种延迟出现的原因与涡轮链接的行为有关。