setTimeOut para chamadas Ajax utilizando onKeyUp e jQuery

Boa tarde, pessoal!

Utilizar onKeyUp para fazer chamadas Ajax é bem interessante, melhorando e muito a experiência do usuário com o sistema, de maneira que os resultados da pesquisa vão aparecendo na medida que ele pressiona as teclas no teclado. Porém, imagine, a cada tecla que o usuário pressiona é uma chamada Ajax na aplicação, o que pode reduzir em performance e aumentar a utilização de banda.

Sendo assim, uma opção é esperar o usuário parar de digitar por um tempinho para então pesquisar via Ajax. Pode parecer voltar no tempo, mas o intervalo é tão pequeno (na ordem de 500 milisegundos) que nem dá pra perceber direito. Além do mais nada impede que coloquemos 250 milisegundos ou menos. Para isso vamos usar as funções setTimeOut e clearInterval.

var interval = 0; 

$(function()  
{  
    $('#query').keyup(function()  
    {  
        // começa a contar o tempo  
        clearInterval(interval); 

        // 500ms após o usuário parar de digitar a função é chamada  
        interval = window.setTimeout(function(){  
            // sua chamada ajax e demais códigos  
        }, 500);  
    });  
}

É isso aí pessoal! Espero ter sisdo claro! Até a próxima!

Published by

Junior Grossi

Senior PHP Engineer with TDD focus. Husband & Dad. Creator of Corcel PHP. Organizer of PHPMG. Software Engineer at InterNACHI. Loves coffee and music.

5 thoughts on “setTimeOut para chamadas Ajax utilizando onKeyUp e jQuery”

  1. Obrigado pelo tutorial. Você poderia me ajudar com um pequeno problema?
    Meu código é esse:

    var interval = 0;

    $(document).ready(function()
    {

    $(".navegacaoli div div").hide();
    $(".navegacaoli div").mouseenter(function(){
    // começa a contar o tempo
    clearInterval(interval);

    interval = window.setTimeout(function(){

    $(".navegacaoli div div").slideDown();
    }, 400);

    }).mouseleave(function(){

    clearInterval(interval);

    interval = window.setTimeout(function(){

    $(".navegacaoli div div").slideDown();
    }, 400);
    });

    });

    O problema é que ele parece não detectar o evento mouseleave
    O que eu deveria fazer?

    1. Olá Messias! Obrigado pelo comentário.

      Creio que seria melhor usar a função “hover” da jQuery, não? Você poderia usar ela com “slideToggle”. Creio que ajudaria bastante.

      Um abraço.

Leave a Reply

Your email address will not be published. Required fields are marked *