Stop an ajax request and create a new one

Question

Stop an ajax request and create a new one

Navigation

#1 by (1 votes)
#2 by (-1 votes)

1

In a search input, an ajax request is made to each letter pressed through a KeyPress in the field, however with each key pressed a new request is made, that is, if the user types fast, and he type a value of 10 letters, 10 different requests will be made, and the same 10 will be processed and sent back through my PHP, and this may cause me some confusion in the return of this data to the user if a previous request is processed late, so I want it with each key pressed, previous requests are aborted and then sends the new request.

$(document).on("keypress", ".meuInput", function(){
    var val = $(this).val();
    if(val != ''){
    jQuery.ajax({
        type: "POST",
        url: "meuarquivo.php",
        datatype: "json",
        data: {src: val},
        success: function(data)
        {
            //processa retorno
        }
    });
});

javascript jquery ajax

asked by anonymous 24.11.2016 / 14:28

2 answers

-1

Try this:

$(document).on("keypress", ".meuInput", function() {
  var val = $(this).val();
  if (val != '') {
    setTimeout(minhafuncao, 500);
    //não coloque () ou a função vai ser executada ignorando os 500ms.
  }
});


var minhaFuncao = function() {
  jQuery.ajax({
    type: "POST",
    url: "meuarquivo.php",
    datatype: "json",
    data: {
      src: val
    },
    success: function(data) {
      //processa retorno
    }
  });
}

24.11.2016 / 15:12

What is the purpose of the avoid_negative_ts option in ffmpeg transcoding? Create Partial for Table [closed]

score 1 · Accepted Answer

Leo, $.ajax returns an object of type jqXHR , and for compatibility issues it keeps some methods and properties in common with XMLHttpRequest , including .abort() .

var jqRequest = null;
$(document).on("keypress", ".meuInput", function(){
    var val = $(this).val();
    if(val != ''){
        if (jqRequest)
            jqRequest.abort();
        jqRequest = jQuery.ajax({
            type: "POST",
            url: "meuarquivo.php",
            datatype: "json",
            data: {src: val},
            success: function(data)
            {
                //processa retorno
            }
        });
    }
});

But note that in this case, there is no control of which input has called this function, so it may be interesting to maintain a more refined control.

var inputs = [];
var jqRequests = {};

$(document).on("keypress", ".meuInput", function(e){
    var val = $(this).val();
    if(val != ''){      
        if (inputs.indexOf(e.currentTarget) == -1)
            inputs.push(e.currentTarget);
        var indice = inputs.indexOf(e.currentTarget);
        if (jqRequests[indice])
            jqRequests[indice].abort();         
        jqRequests[indice] = jQuery.ajax({
            type: "POST",
            url: "meuarquivo.php",
            datatype: "json",
            data: {src: val},
            success: function(data)
            {
                //processa retorno
            }
        });
    }
});

Finally, your application would perform better if you add a small delay before performing the AJAX request.

var myDelay = null;
$(document).on("keypress", ".meuInput", function(){
    var val = $(this).val();
    if(val != ''){
        if (myDelay)
            window.clearInterval(myDelay);
        myDelay = window.setTimeout(function () {
            myDelay = null;
            jQuery.ajax({
                type: "POST",
                url: "meuarquivo.php",
                datatype: "json",
                data: {src: val},
                success: function(data)
                {
                    //processa retorno
                }
            });
        }, 2000);
    }
});