Добавить задержку перед отправкой нового ajax-запроса с помощью jquery

у меня есть список ссылок, которые указывают на 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>

и у меня есть javascript(jquery), который восстанавливает и добавляет 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>')
        }
    });
});

Я пытался работать с setTimeout (), но он не работает, как я стремился.

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

как я могу сказать jquery ждать (500ms или 1000ms или ...) при наведении курсора перед отправкой нового запроса?

7
ajax delay jquery timeout

4 ответов

Я думаю, что, возможно, вместо того, чтобы прерывать запрос, вы должны контролировать запросы ajax с переменной, например, с именем processing=false, это будет сброшено на false, в функции успеха / ошибки. Тогда вы будете выполнять функцию только в setTimeout, если обработка была ложной.

что-то типа:

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);
});
8
$.fn.extend( {
        delayedAjax: function() {
          setTimeout ($.ajax, 1000 );
        }
});

  $.fn.delayedAjax();

Кажется, работает, но, вероятно, не самое красивое решение. Кроме того, вам нужно добавить код для передачи args & timeout val, если вы хотите

2

вам нужно будет иметь переменную, которая может действовать таймер обратного отсчета, если вы хотите, что событие mouseout также отменит...

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

это работает для меня...

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