Ajouter un délai avant d'envoyer une nouvelle requête ajax en utilisant jquery

Question

J'ai une liste de liens pointant vers des pages 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> 

et moi avons un javascript (jquery) Wich recives et ajoutez le code html à mon document. J'ai essayé de travailler avec setTimeout(), mais cela ne fonctionne pas comme je l'ai aspecté (0). Comment puis-je demander à jquery d'attendre (500ms ou 1000ms ou ...) en survol avant d'envoyer la nouvelle requête?

Answer 1

Je pense que peut-être au lieu d'annuler la demande, vous devez contrôler les demandes ajax avec une variable, par exemple, appelé processing=false, qui serait remis à faux, dans la fonction succès/erreur. Ensuite, vous n'exécuteriez la fonction que dans setTimeout, si le traitement était false.

Quelque chose comme:

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

semble fonctionner, mais sans doute pas la plus jolie solution. En outre, vous devez ajouter du code pour passer les arguments & le délai d'expiration val si vous voulez

Answer 3

Vous aurez besoin d'avoir une variable qui peut agir un compte à rebours si vous le voulez, qu'un événement mouseout sera également annuler. .

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

cela fonctionne pour moi ...

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