JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="div1">
    <div id="div2"></div>
  </div>
</body>

CSS

#div1 {
	width: 400px;
	height: 300px;
	background-color: lightblue;
	margin-left: auto;
	margin-right: auto;
}
#div2 {
	width: 300px;
	height: 200px;
	float: right;
	background-color: lightgreen;
}

JavaScript

var timerActive = false;
$('#div1, #div2').mouseleave(function(e) {
    var trigger = $(this).attr('id');
    if (timerActive) {
    	clearTimeout(announce);
    }
    window.announce = setTimeout(function() {
    	alert(trigger);
    	timerActive = false;
    },0);
	timerActive = true;
});