web-dev-qa-db-fra.com

Abandonner la demande ajax précédente sur une nouvelle demande

J'ai une fonction qui exécute un appel ajax sur le changement d'une entrée.

Mais il est possible que la fonction soit à nouveau activée avant la fin de l'appel ajax précédent.

Ma question est la suivante: comment puis-je interrompre le précédent appel ajax avant d'en commencer un nouveau? Sans utiliser une variable globale. (Voir la réponse à une question similaire ici )

jsfiddle de mon code actuel:

Javascript: 

var filterCandidates = function(form){
    //Previous request needs to be aborted.
    var request = $.ajax({
        type: 'POST',
        url: '/echo/json/',
        data: {
            json: JSON.stringify({
                count: 1
            })
        },
        success: function(data){
            if(typeof data !== 'undefined'){
                jQuery('.count').text(data.count)
                console.log(data.count);
            }
        }
    });
};

if(jQuery('#search').length > 0){
    var form = jQuery('#search');
    jQuery(form).find(':input').change(function() {
        filterCandidates(form);
    });
    filterCandidates(form);
}

HTML: 

<form id="search" name="search">
    <input name="test" type="text" />
    <input name="testtwo" type="text" />
</form>
<span class="count"></span>
javascriptajaxjquery
64
CharliePrynn
 var currentRequest = null;    

currentRequest = jQuery.ajax({
    type: 'POST',
    data: 'value=' + text,
    url: 'AJAX_URL',
    beforeSend : function()    {           
        if(currentRequest != null) {
            currentRequest.abort();
        }
    },
    success: function(data) {
        // Success
    },
    error:function(e){
      // Error
    }
});
93
Siva.Net
var filterCandidates = function(form){
    //Previous request needs to be aborted.
    var request = $.ajax({
        type: 'POST',
        url: '/echo/json/',
        data: {
            json: JSON.stringify({
                count: 1
            })
        },
        success: function(data){
            if(typeof data !== 'undefined'){
                jQuery('.count').text(data.count)
                console.log(data.count);
            }
        }
    });
    return request;
};

var ajax = filterCandidates(form);

enregistrer dans une variable, puis, avant d'envoyer une seconde fois, vérifiez sa readyState et appelez abort() si nécessaire

9
Romko

une variation de la réponse acceptée et adoptée à partir d'un commentaire sur la question - cela a très bien fonctionné pour mon application ...

en utilisant $ .post () de jQuery ....

var request = null;

function myAjaxFunction(){
     $.ajaxSetup({cache: false}); // assures the cache is empty
     if (request != null) {
        request.abort();
        request = null;
     }
     request = $.post('myAjaxURL', myForm.serialize(), function (data) {
         // do stuff here with the returned data....
         console.log("returned data is ", data);
     });
}

Appelez myAjaxFunction () autant de fois que vous le souhaitez et cela tue tous les fichiers sauf le dernier (mon application possède un "sélecteur de date" et modifie le prix en fonction des jours sélectionnés - lorsque quelqu'un clique rapidement sans le code ci-dessus, il un tirage au sort pour savoir s'ils obtiendront le bon prix ou non. Avec cela, 100% correct!)

2
CFP Support

Essayez ce code

var lastCallFired=false;

var filterCandidates = function(form){

    if(!lastCallFired){
    var request = $.ajax({
        type: 'POST',
        url: '/echo/json/',
        data: {
            json: JSON.stringify({
                count: 1
            })
        },
        success: function(data){
            if(typeof data !== 'undefined'){
                jQuery('.count').text(data.count)
                console.log(data.count);
            }
        }
    });
        setInterval(checkStatus, 20);

    }

};

if(jQuery('#search').length > 0){
    var form = jQuery('#search');
    jQuery(form).find(':input').change(function() {
        filterCandidates(form);
    });
    filterCandidates(form);
}

var checkStatus = function(){
        if(request && request.readyState != 4){
            request.abort();
        }
    else{
        lastCallFired=true;
    }
};
0
Murali Murugesan
if(typeof window.ajaxRequestSingle !== 'undefined'){
  window.ajaxRequestSingle.abort();
}

window.ajaxRequestSingle = $.ajax({
  url: url,
  method: 'get',
  dataType: 'json',
  data: { json: 1 },
  success: function (data) {
    //...
  },
  complete: function () {
    delete window.ajaxRequestSingle;
  }
});
0
Arthur Shlain