Question

我在html页面上有复选框，其中触发了JQuery click事件，从而进行ajax调用。请求完成后，将使用响应数据呈现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，似乎是不好的做法，有其自身的缺点。

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

Answer 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.
}

现在，您可以按照enqueueFetchActivities之前的方式拨打fetchActivites。

Answer 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()

在上一个完成时发出新的ajax请求

2 个答案: