как вручную закрыть всплывающее окно div, когда div автоматически закрывается через 5 секунд с помощью jquery

Question

В ответ на вызов ajax я использую задержку в 5 секунд для закрытия div, в котором приходит эхо.

Это мое div-всплывающее окно:

<div class="echo">
   <div class="echomessage" role="alert">
      <span class="closebtn">X</span>  
      <?php echo '<i class="fas fa-check-square"></i><b>' . $numberFiles . '</b> items are deleted!<br />'; ?>
   </div>
</div>

Успех ajax:

success:function(data){

            $('.echo').html(data);                  
    $('.echomessage').delay(5000).fadeOut(500);// close auto after 5 sec
}

Для ручного закрытия всплывающего окна я использую этот код:

 // close echo manually
    $(document).on('click','.closebtn',function() {     
        $(this).closest('.echomessage').fadeOut(500);
    });

Проблема: Когда я хочу закрыть эхо-сообщение, нажав Xв течение 5 секунд он не работает.

Когда я удаляю $('.echomessage').delay(5000).fadeOut(500); в случае успеха, он закрывается сразу после нажатия

Как можно использовать оба варианта: если не нажать, закрывается через 5 секунда если сразу нажать кнопку закрытия?

Fiddle: https://jsfiddle.net/3v0noy9h/

Answer 1

Вместо использования задержки вы можете использовать асинхронную функцию setTimeout ...

$(document).on('click','.closebtn',function() {     
        $(this).closest('.echomessage, .echomessage-exists, .echomessage-download').fadeOut(500);
    });
setTimeout(function () {$('.echomessage').fadeOut()}, 5000);