Несколько вызовов в Ajax, а не один раз

Question

У меня есть следующий код, который отлично работает в большинстве случаев, но проблема, с которой я столкнулась, - это наведите курсор мыши на мышь. После того, как вы навеки на 10 секунд, содержимое расширяется, а затем вызывает ajax. Ajax делает звонки 5 раз, а не один раз.

Я не уверен, почему его держит вызов 5 раз. Может кто-нибудь помочь мне исправить это, так что вызов ajax выполняется только один раз?

Вот мой фрагмент кода ниже, и полный рабочий fiddle demo здесь

$(".previewCard-content").hide(); 
var timeo = null; 
$("body").on("mouseenter", ".previewCard-showhide", function() { // Use rather mouseenter! 
    var $that = $(this); // Store the `this` reference 
    clearTimeout(timeo); // Clear existent timeout on m.Enter 

    timeo = setTimeout(function() { // Before setting a new one 
     $that.hide().closest('p').next(".previewCard-content").slideDown("slow"); 

     /**************** AJAX CALL********************/ 
     var LinkTextVal = $that.closest('.previewCard-b').find('.previewCardPageLink').text(); 
     console.log(" LinkTextVal " + LinkTextVal); 
     var descPageName = LinkTextVal + ' | About'; 
     if ($('#userID').val() !== '' && $('#userID').val() !== undefined && $('#userID').val() !== null) { 
      $.ajax({ 
       url: '/localhost/biz/actions/searchBookmark' + '?cachestop=' + nocache, 
       type: "get", 
       data: { 
        bookmarkName: descPageName 
       }, 
       success: function(response) { 
        if (response === true) { 
         $that.parents('.previewCard-b').find('.save a').addClass('saved'); 
         $that.parents('.previewCard-b').find('.save a').addClass('active'); 
         $that.parents('.previewCard-b').find('.save a').find(".action-text").text("Saved"); 
        } 

       }, 
       error: function(e) { 
        console.log('Unable to check if a bookmark exists for the user.'); 
       } 
      }); 
     } 
     /***************** END AJaX/SAVE BUTTON ************/ 

    }, 1000); 
}).on("mouseleave", ".previewCard-showhide", function() { // mouse leaves? Clear the timeout again! 
    clearTimeout(timeo); 
}); 
$(".close-btn").on("click", function() { 
    var $itemB = $(that).closest(".previewCard-b"); 
    $itemB.find(".previewCard-content").slideUp(); 
    $itemB.find(".previewCard-showhide").show(); 
}); 

Answer 1

при наведении курсора мыши события происходят каждый раз, когда мышь перемещается над элементом. Вам нужно иметь boolean, который проверяет, отправлен ли запрос AJAX или нет, и если он не отправил запрос , иначе игнорировать это событие.

$(".previewCard-content").hide(); 
var timeo = null; 
var ajaxSent = false 
$("body").on("mouseenter", ".previewCard-showhide", function() { // Use rather mouseenter! 
    var $that = $(this); // Store the `this` reference 
    clearTimeout(timeo); // Clear existent timeout on m.Enter 

    timeo = setTimeout(function() { // Before setting a new one 
     $that.hide().closest('p').next(".previewCard-content").slideDown("slow"); 

     /**************** AJAX CALL********************/ 
     var LinkTextVal = $that.closest('.previewCard-b').find('.previewCardPageLink').text(); 
     console.log(" LinkTextVal " + LinkTextVal); 
     var descPageName = LinkTextVal + ' | About'; 
     if ($('#userID').val() !== '' && $('#userID').val() !== undefined && $('#userID').val() !== null && !ajaxSent) { 
      ajaxSent = true; 
      $.ajax({ 
       url: '/localhost/biz/actions/searchBookmark' + '?cachestop=' + nocache, 
       type: "get", 
       data: { 
        bookmarkName: descPageName 
       }, 
       success: function(response) { 
        if (response === true) { 
         $that.parents('.previewCard-b').find('.save a').addClass('saved'); 
         $that.parents('.previewCard-b').find('.save a').addClass('active'); 
         $that.parents('.previewCard-b').find('.save a').find(".action-text").text("Saved"); 
        } 

       }, 
       error: function(e) { 
        console.log('Unable to check if a bookmark exists for the user.'); 
       } 
      }); 
     } 
     /***************** END AJaX/SAVE BUTTON ************/ 

    }, 1000); 
}).on("mouseleave", ".previewCard-showhide", function() { // mouse leaves? Clear the timeout again! 
    clearTimeout(timeo); 
}); 
$(".close-btn").on("click", function() { 
    var $itemB = $(that).closest(".previewCard-b"); 
    $itemB.find(".previewCard-content").slideUp(); 
    $itemB.find(".previewCard-showhide").show(); 
});