Не отсылать запросы

169

07 января 2019, 04:00

Задача в следующем: На странице есть несколько блоков. При наведении мыши на блок отправляется запрос на сервер и ответ вставляется в этот блок. Все отлично, если пользователь дождался обновления блока. Но в обычной ситуации он не дожидается изменений и переходит на другой блок. В этот момент приходят первые данные и отправляется запрос на получение данных для нового блока. А если пользователь начинает хаотично водить мышкой по блокам, получаются бесконечные запросы. Каким образом можно реализовать правильное поведение? Если пользователь перешел на другой блок, не дождавшись данных, эти данные никуда не добавляются, запрос игнорируется. И если водит хаотично - не отпралять запросы

Answer 1

$(function(){
  var waiting = false;
  $(<selector>).on("mouseenter", function(){
    if (waiting)
      return;
    ...
    waiting = true;
    $.ajax({
      ...
      complete: function(){
        waiting = false;
      } 
    });
  });
});

Answer 2

Можно отменить ajax запрос, который еще в ожидании:

var xhr = null; // выводим переменную в глобальный уровень
var getBlockData = function() {
    if(xhr) // если есть запрос в ожидании - отменяем его
        xhr.abort(); 
    xhr = $.ajax({ // делаем новый запрос
        url: "/some/api/",
        success: function(response){
           // какое-дибо действие с ответом response
           xhr = null; // обнуляем xhr
        }
    });
};
// при наведении на блок вызываем функцию getBlockData()