how to close manually popup div when div auto closes after 5 sec with jquery

Question

As a response from an ajax call, I use a delay from 5 sec for closing the div in which the echo comes.

This is my div-popup:

<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>

The ajax success:

success:function(data){

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

For manually closing the popup-div, I use this code:

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

The problem: When I want to close the echomessage by clicking X within 5 sec, it does not work.

When I delete $('.echomessage').delay(5000).fadeOut(500); in the success, it closes immediately after click

How can I have both options: if not click, closes after 5sec and if click close immediately?

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

Answer 1

Instead of using delay you can use a asynchron setTimeout function...

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