如何限制jQuery中fadeIn（）和fadeOut（）函数的执行次数？

Question

我在我的网页上应用了一些fadeIn（）/ fadeOut（）函数，这些函数在mouseenter / mouseleave上执行，但是我注意到如果我拖入并快速拖出光标多次，所选的块保持不变几秒后出现/消失。

我试图谷歌一些JQuery函数来修复它，但我还没有找到任何东西。

 $('.navbar').mouseenter(function () {
 $(".context-box__blur").fadeIn(200).css('display', 'inline-block');
 $("span").fadeIn(200).css('display', 'inline-block');
});
 $('.navbar').mouseleave(function () {
 $("span").fadeOut(200);
 $(".context-box__blur").fadeOut(200);
});

如何修复它，或者如何限制函数执行的数量？

Answer 1

fadeIn()和fadeOut()有一个complete函数，在fadeIn / fadeOut完成后运行，你可以在没有完成之前禁用fadein或out：

var wait = false;

function fadeOut()
{
    if(wait) return false; // previous action not complete, cancel fadeOut
    wait = true;
    $("span").fadeOut(200, function(){ wait = false; })
}

function fadeIn()
{
    if(wait) return false; // previous action not complete, cancel fadeIn
    wait = true;
    $("span").fadeIn(200, function(){ wait = false; })
}

Answer 2

这就是mouseenter()和mouseleave()的工作方式。尝试使用mouseover()和mouseout()代替。

$("p").mouseover(function(){
    $("p").css("background-color", "yellow");
  });

  $("p").mouseout(function(){
    $("p").css("background-color", "lightgray");
  });

https://jsfiddle.net/KyleMit/GR8sk/

这个JSFiddle将让您清楚地了解这些鼠标事件的工作原理。