Close get request as soon as you start another

Question

In my Commerce there is a search field. As you type, you return a list of products in a div below the search field. That’s 100%

On the label I put an onkeyup that performs a function that searches the product list and displays. this is 100% too

My problem is that if the digital person "S5 battery" for example will be made 10 get synchronous, each result display takes ~1 seconds, the removal of the product list in this example would take ~10 seconds

My question is whether there is a new request created to stop/break/kill the previous request

Follow down my get

$.ajax({
        url: "<?=$this->Html->url(array('controller' => 'busca', 'action' => 'searchanise'));?>",
        type: 'POST',
        async: false,
        data: {texto: text},
        success: function(data){
            retorno = JSON.parse(data);

            $("#searchanise").html(retorno);
        }

    });

Answer 1

I suggest you create a function of debauchery, a function that sends ajax requests not to each event but to each time interval. Thus avoid sending excess requests.

Another alternative or complementary possibility is to have a variable that knows the last request, so that you do not receive the wrong answer if they come in order.

If the list of possibilities is not too large you could pass it to an object right when you load the page and do this functionality in Javascript only.

function debouce, example:

function debounce(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

$('input.username').keypress(debounce(function (event) {
  // do the Ajax request
}, 250));

This way the ajax request will only be sent after 1/4 second of inactivity.

variable /flag with last request:

Using your code, attach a variable to the previous scope:

var ajaxID = 0;
$.ajax({
    url: "<?=$this->Html->url(array('controller' => 'busca', 'action' => 'searchanise'));?>",
    type: 'POST',
    async: false,
    data: {texto: text},
    beforeSend: function(){
        ajaxID++;
        this.ajaxID = ajaxID;
    },
    success: function(data){
        if (this.ajaxID != ajaxID) return; // descartar pois não é a ultima
        retorno = JSON.parse(data);
        $("#searchanise").html(retorno);
    }

});

Answer 2

You can save the call get for a variable:

var request = $.ajax({
    type: 'POST',
    url: 'someurl',
    success: function(result){}
});

So every time you make a request, just check the variable request. If it is not null or undefined, just give one abort before starting the new request:

request.abort();