이전에 완료되었을 때 새로운 Ajax 요청을 작성하십시오.

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

하나의 아약스 요청이 진행되는 동안 문제가 발생합니다. 사용자는 click 다른 확인란을 선택하고 처음으로 완료되기 전에 다른 Ajax 요청을 할 수 있습니다. 이는 렌더링 될 데이터를 엉망으로 만든다.

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

async: false을 사용하는 것은 나쁜 관행으로 보일뿐만 아니라 자체 단점이 있습니다.

작업을 수행하는 다른 방법이 있습니까?

Answer 1

여기 아무도 자바 스크립트 솔루션이 없으므로.

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를 호출 할 수 있습니다.

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