Как я могу ограничить количество выполнений функций fadeIn () и fadeOut () в jQuery?

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

Так работает 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 даст вам четкое представление о том, как работают эти события мыши.

Answer 2

fadeIn() и fadeOut() имеет функцию complete, которая запускается после завершения fadeIn / fadeOut, вы можете отключить или отключить fadein до того, как другой не будет завершен:

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; })
}