Как отложить исполнение mouseleave — если за время таймаута курсор вернулся в область, то отменить?

Question

[lagudal]

есть такая конструкция: по ховер на родительский селектор становится видимым дочерний, но выход нужно сделать с задержкой, т.е. когда курсор уходит с нужной области, скрыть дочерний, но через 1 секунду.
При этом, если в течении этой секунды курсор вернулся в эту область, то отменить исполнение скрипта.
Как видно на простом примере, скрипт у меня в любом случае исполнится после таймаута.
Как проще решить?

Answer 1

[historydev]

$('.block').hover(function (){
  $('.subblock').addClass('active');
})
$('.block').mouseleave(function (){
  const t = setTimeout(function () {
      $('.subblock').removeClass('active');
    },1000)
  $('.block').mouseenter(_ => {
    clearTimeout(t)
  })
})

Answer 2

[v3shin]

// on mouseleave
leaveTimeout = setTimeout(function () {
    $('.subblock').removeClass('active');
},1000);

// on enter
if (leaveTimeout) clearTimeout(leaveTimeout);