P21 延时提示框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>延时提示框</title>
    <style>
        div {
            float: left;
            margin: 10px;
        }

        #div1 {
            width: 50px;
            height: 50px;
            background: blueviolet;
        }

        #div2 {
            width: 200px;
            height: 200px;
            background: chocolate;
            display: none; /* 一开始是不需要显示的 */
        }
    </style>
    <script>
        window.onload = function(){
            var oDiv1 = document.getElementById("div1");
            var oDiv2 = document.getElementById("div2");
            var time = null;
            // 1. 首先是当我鼠标移入头像div的时候, 应该显示头像详情div
            oDiv1.onmouseover = function(){
                clearTimeout(time);
                oDiv2.style.display = 'block';
            }

            // 2. 当鼠标移出头像div的时候, 头像详情div应该延时0.5秒后再隐藏起来
            oDiv1.onmouseout = function(){
                time = setTimeout(function(){
                    oDiv2.style.display = 'none';
                }, 500);
            }
            // 3. 完成第二步骤以后, 一会发现. 当我们移出div1, 移入odiv2的时候, div2还是在0.5秒以后隐藏了
            // 这里需要进行改进, 就是当我鼠标移入div2的时候, 我们需要把定时器给它关掉, 不让它执行隐藏的代码
            oDiv2.onmouseover = function(){
                clearTimeout(time);

            }

            // 4. 此时就是当鼠标移出div2的时候, 我们要隐藏div2
            oDiv2.onmouseout = function(){
                // 这里是有一点小问题的, 因为如果我们是移出div2然后直接移入div1的话, 发现div2闪了以下
                // 这是因为先执行了下面的隐藏, 所以这里我们也要使用延时计时器来操作, 并且如果是移入div1
                // 直接关闭这个计时器即可, 不用执行隐藏的代码.
                time = setTimeout(function(){
                    oDiv2.style.display = 'none';
                }, 500);
            }

        }
    </script>
</head>

<body>
    <div id="div1">头像</div>
    <div id="div2">头像详情</div>
</body>

</html>

下面的是需要对上面的代码进行简化处理

因为在JS中，是允许连等于赋值的，比如a = b = c = function(){}

那么a， b， c都是这个函数；所以上面的代码可以进行简化处理如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>延时提示框</title>
    <style>
        div {
            float: left;
            margin: 10px;
        }

        #div1 {
            width: 50px;
            height: 50px;
            background: blueviolet;
        }

        #div2 {
            width: 200px;
            height: 200px;
            background: chocolate;
            display: none; /* 一开始是不需要显示的 */
        }
    </style>
    <script>
        window.onload = function(){
            var oDiv1 = document.getElementById("div1");
            var oDiv2 = document.getElementById("div2");
            var time = null;
            oDiv2.onmouseover = oDiv1.onmouseover = function(){
                clearTimeout(time);
                oDiv2.style.display = 'block';
            }
            
            oDiv2.onmouseout = oDiv1.onmouseout = function(){
                time = setTimeout(function(){
                    oDiv2.style.display = 'none';
                }, 500);
            }
        }
    </script>
</head>

<body>
    <div id="div1">头像</div>
    <div id="div2">头像详情</div>
</body>

</html>