如何使用jquery在div自动关闭5秒后手动关闭弹出div

作为对ajax调用的响应，我使用5秒的延迟来关闭echo所在的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>

对于手动关闭弹出div，我使用以下代码：

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

问题：当我想在5秒内单击

X

关闭echomessage时，它不起作用

当我删除

$（'.echomessage'）。延迟（5000）。淡出（500）在成功中，单击后立即关闭

我怎样才能同时拥有这两个选项：如果不单击，则在5秒后关闭，如果单击立即关闭

Fiddle:
您可以使用异步设置超时功能，而不是使用延迟

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

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