Ajouter un délai avant l’envoi d’une nouvelle requête ajax à l’aide de jquery

J’ai une liste de liens qui pointent vers des pages html.

 Item 1
 Item 2
 Item 3
 Item 4

Et j’ai un javascript (jquery) qui recives et ajoute le code HTML à mon document.

 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(''+ data +'
') } }); });

J’ai essayé de travailler avec setTimeout () mais cela ne fonctionne pas comme prévu.

  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(''+ data +'
') } }); }, 2000 ); });

Comment puis-je dire à jQuery d’attendre (500 ms ou 1000 ms ou…) en stationnaire avant d’envoyer la nouvelle demande?

Je pense qu’au lieu d’abandonner la demande, vous devriez peut-être contrôler les demandes ajax avec une variable, par exemple, processing=false , qui serait réinitialisée à false dans la fonction success / error. Ensuite, vous n’exécuteriez la fonction dans setTimeout que si le traitement était faux.

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(''+ data +'
') } }); } }, 2000); });

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

Semble fonctionner mais probablement pas la solution la plus jolie. En outre, vous devez append du code pour passer les arguments arg & val timeout si vous le souhaitez.

Vous aurez besoin d’une variable pouvant agir comme un compte à rebours si vous le souhaitez, qu’un événement de sortie de la souris annulera également …

 $(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"); }); });

ça marche pour moi …

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