2

No meu ecommerce tem um campo de busca. Conforme o usuário vai digitando, vai retornando uma lista de produtos em uma div a baixo do campo de busca. isso está 100%

No label coloquei um onkeyup que executa uma função que busca a lista de produto e exibe. isso está 100% também

O meu problema é que se a pessoa digital "bateria s5" por exemplo será feito 10 get síncrona, cada exibição de resultado demora ~1 segundos, a exbição da lista de produtos nesse exemplo iria demorar ~10 segundos

A minha dúvida é se tem como assim que for criada uma nova requisição parar/quebrar/matar a requisição anterior

Segue a baixo o meu 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);
        }

    });
2
  • Você pode usar o jQuery Autocomplete que já faz tudo isso.
    – Franchesco
    Commented 12/03/2015 às 13:30
  • É um sistema de busca complexo, que leva várias métricas em consideração, não da para simplesmente fazer um array com os nomes dos produtos =/. Mas vlw a ajuda Commented 12/03/2015 às 13:42

2 Respostas 2

1

Sugiro criares uma funçao debouce, uma função que envia pedidos ajax não a cada evento mas a cada intervalo de tempo. Assim evitas enviar pedidos em excesso.

Outra possibilidade alternativa ou complementar é teres uma variável que saiba qual foi o ultimo pedido, para que não recebas a resposta errada caso elas venham em ordem trocada.

Se a lista de possibilidades não fôr muito grande podias passar isso para um objeto logo quando carregas a página e fazer essa funcionalidade no JavaScript somente.

funçao debouce, exemplo:

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

Dessa maneira só será enviado o pedido ajax depois de 1/4 de segundo de inatividade.

variável /flag com ultimo pedido:

Usando o teu código, juntas uma variável ao escopo anterior:

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);
    }

});
0

Você pode guardar a chamada get para uma variável:

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

Então toda vez que for fazer uma requisição é só verificar a variável request. Se ela não for nula ou indefinida, é só dar um abort antes de começar a nova requisição:

request.abort();
1
  • Assim não da certo, por que ele executa uma requisição e só executara a próxima quando terminar essa, e se houver próxima, no caso se cliente escrever camera, irá ser executado uma requisição com a letra "c" e não acontecerá nada com as próximas requisições "a","m","e","r","a" Commented 12/03/2015 às 15:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .