Dodaj opóźnienie przed wysłaniem nowego żądania ajax za pomocą jquery

Question

Mam listę linków, które wskazują strony 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> 

i mam javascript (jQuery) recives Wich i dołączyć do mojego dokumentu HTML.

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

Próbowałem już pracować z funkcją setTimeout(), ale nie działa ona zgodnie z założeniami.

Jak mogę nakazać jQuery czekać (500ms lub 1000ms lub ...) po najechaniu kursorem przed wysłaniem nowego żądania?

Answer 1

myślę, że być może zamiast przerywania wniosek, należy kontrolować Ajax żądań ze zmienną, na przykład, o nazwie processing=false, który byłby ustawiony na false, w funkcji sukcesu/błędu. Następnie można wykonać tylko funkcję w setTimeout, jeśli przetwarzanie było fałszywe.

Coś jak:

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

wydaje się działać, ale prawdopodobnie nie najładniejszym rozwiązaniem. Musisz też dodać kod, aby przekazać argumenty o wartości timeout val, jeśli chcesz

Answer 3

Musisz mieć zmienną, która może działać w trybie odliczającym, jeśli chcesz, że zdarzenie mouseout również zostanie anulowane. .

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

działa to dla mnie ...

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