Agregar demora antes de enviar nueva solicitud ajax usando jquery

Question

Tengo una lista de enlaces que apuntan a páginas html.

<ul id="item-list"> 
    <li><a href="assets/data/item1.html">Item 1</a></li> 
    <li><a href="assets/data/item2.html">Item 2</a></li> 
    <li><a href="assets/data/item3.html">Item 3</a></li> 
    <li><a href="assets/data/item3.html">Item 4</a></li> 
</ul> 

y tengo una Javascript (jQuery) recives wich y añadir el html en mi documento.

var request; 
$('#item-list a').live('mouseover', function(event) { 
    if (request) 
     request.abort(); 
     request = null; 

    request = $.ajax({ 
     url: $(this).attr('href'), 
     type: 'POST', 
     success: function(data) { 
      $('body').append('<div>'+ data +'</div>') 
     } 
    }); 
}); 

He intentado trabajar con setTimeout() pero no funciona como he aspectado.

var request, timeout; 
$('#item-list a').live('mouseover', function(event) { 
    timeout = setTimeout(function(){ 
     if (request) 
      request.abort(); 
      request = null; 

     request = $.ajax({ 
      url: $(this).attr('href'), 
      type: 'POST', 
      success: function(data) { 
       $('body').append('<div>'+ data +'</div>') 
      } 
      }); 
     }, 2000 
    ); 
}); 

¿Cómo puedo saber que esperar jQuery (500 ms o 1000 ms ...) o en vuelo estacionario antes de enviar la nueva solicitud?

Answer 1

Creo que tal vez en lugar de abortar la solicitud, debe controlar las peticiones ajax con una variable, por ejemplo, llama processing=false, que se restablecerá a la mentira, a la función de éxito/error. Entonces solo ejecutaría la función en setTimeout, si el procesamiento fue falso.

Algo así como:

var request, timeout; 
var processing=false; 
$('#item-list a').live('mouseover', function(event) { 
    timeout = setTimeout(function() { 
    if (!processing) { 
     processing=true; 
     request = $.ajax({ 
     url: $(this).attr('href'), 
     type: 'POST', 
     success: function(data) { 
      processing=false; 
      $('body').append('<div>'+ data +'</div>') 
     } 
     }); 
    } 
    }, 2000); 
}); 

Answer 2

$.fn.extend({ 
     delayedAjax: function() { 
      setTimeout ($.ajax, 1000); 
     } 
}); 

    $.fn.delayedAjax(); 

Parece que funciona, pero probablemente no es la solución más bonita. Además, necesita agregar algún código para pasar los argumentos & el valor de tiempo de espera validado si desea

Answer 3

Deberá tener una variable que pueda actuar como un temporizador de cuenta regresiva si lo desea, que un evento de mouse también se cancelará .. .

$(function(){ 
    $("#item-list a").live("mouseover",function(){ 
    var a = $(this); 
    a.data("hovering","1"); 
    setTimeout(function(){ 
     if (a.data("hovering") == "1") { 
      // this would actually be your ajax call 
      alert(a.text()); 
     } 
    }, 2000); 
    }); 
    $("#item-list a").live("mouseout",function(){ 
    $(this).data("hovering","0"); 
    }); 
}); 

Answer 4

esto funciona para mí ...

$(show_id).animate({ 
    opacity: 0 
}, 5000, function() { 
    $(show_id).html(data) 
});