多次調用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請求，如果它沒有發送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(); 
});