前一个完成时发出新的ajax请求答案

【问题标题】：make new ajax request when previous one finished前一个完成时发出新的ajax请求
【发布时间】：2014-07-17 15:10:06
【问题描述】：

我在 html 页面上有复选框，触发了 ajax 调用的 JQuery click 事件。请求完成后，将使用响应数据呈现 html 页面。

fetchActivites = ()->
  $.ajax
    beforeSend: ()->
      $('#checkbox_loader').show()

    url: "/project/users/"
    success: (data, textStatus, jqXHR) ->
      plotData(data, is_append)
    complete: ()->
      $('#checkbox_loader').hide()

问题是，当一个 ajax 请求正在进行时。在第一个完成之前，用户可以click 另一个复选框并发出另一个 ajax 请求。这会弄乱要呈现的数据。

$(document).on "change", ".selectpicker", (evt) ->
  fetchActivites()

使用async: false，似乎是不好的做法，有其自身的缺点。

还有其他方法可以完成任务吗？

【问题讨论】：

普通的旧javascript答案会好吗？ :)
不确定，但请做
好吧，如果您不确定 javascript，我不会浪费您的时间。让我们等coffeescripter。
你可以使用一个 jquery 函数并在完整的回调中重置它。或者您可以禁用复选框，直到请求完成。或者您可以在复选框上放置某种覆盖/微调图像，以显示进度直到完成。

标签： jquery ajax coffeescript

【解决方案1】：

既然没有人来这里是一个javascript解决方案。

var pending; //current request
function enqueueFetchActivities(/*args*/) {
    var current,
        ctx = this,  //save current context
        args = [].slice.call(arguments), //and arguments
        doFetch = function() { //transparent invoker;
            return fetchActivities.apply(ctx, args);
        };
    pending = current = 
          pending ? pending.then(doFetch) : doFetch();

    return current.always(function() { //always try to remove pending 
        if(pending === current) { //otherwise another request was made
             pending = null;
        }
    });       
}
function fetchActivites() {
    return $.ajax(/*...*/);//whatever you want it to do.
}

现在您可以像之前调用fetchActivites 一样调用enqueueFetchActivities。

【讨论】：

【解决方案2】：

# if another ajax request comes when the previous request has not finished,
# just abort the previous one.
promise?.abort()
promise = $.ajax
  # some ajax params
promise.success = (data, textStatus, jqXHR) ->
  plotData(data, is_append)
promise.complete = ()->
  $('#checkbox_loader').hide()

【讨论】：