多次调用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(); 
});