81,122
社区成员




<html>
<head>
<title>
delay test
</title>
<style type="text/css">
.container{width:500px;height:500px;margin:100px auto;}
#item_a{width:100px;height:100px;background-color:red;}
#item_b{width:100px;height:100px;background-color:blue;margin:100px;}
</style>
</head>
<body>
<div class="container">
<div id="item_a"></div>
<div id="item_b"></div>
</div>
</body>
<script type="text/javascript">
var objectA = document.getElementById("item_a");
var objectB = document.getElementById("item_b");
var time = 1000;
var timeout;
hideB();
objectA.onmouseover = function(){
showB();
}
objectA.onmouseout = function(){
hideB(time);
}
objectB.onmouseover = function(){
if(timeout){
clearTimeout(timeout);
}
showB();
}
objectB.onmouseout = function(){
hideB();
}
function showB(){
objectB.style.display = "";
}
function hideB(time){
if(time){
var promise = new Promise(function(resolve){
resolve();
}).then(sleep(time)).then(function(){
objectB.style.display = "none";
});
}else{
objectB.style.display = "none";
}
}
function sleep(delay_time){
return function(){
return new Promise(function(resolve, reject){
timeout = setTimeout(resolve, delay_time);
});
}
}
</script>
</html>