Aggiungi ritardo prima di inviare una nuova richiesta Ajax utilizzando jquery

Question

Ho una lista di collegamenti che puntano a pagine 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> 

e ho un javascript (jQuery) vengono accolte wich e aggiungere il codice HTML per il mio 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>') 
     } 
    }); 
}); 

Ho provato a lavorare con setTimeout() ma non funziona come ho previsto.

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

Come faccio a dire a jQuery aspettare (500ms o 1000 ms o ...) al passaggio del mouse prima di inviare la nuova richiesta?

Answer 1

Penso che forse, invece di interrompere la richiesta, è necessario controllare le richieste Ajax con una variabile, ad esempio, chiamato processing=false, che sarebbe reimpostato su false, nella funzione di successo/errore. Quindi si eseguirà la funzione solo in setTimeout, se l'elaborazione era falsa.

Qualcosa di simile:

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

Sembra funzionare, ma probabilmente non la soluzione più bella. Inoltre, è necessario aggiungere del codice per passare gli args & il valore di timeout se si desidera

Answer 3

Avrete bisogno di avere una variabile che può agire con un conto alla rovescia se volete, che un evento di mouseout si annulla anche .. .

$(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

questo funziona per me ...

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