原生js实现[2] 延时提示框

27499891022_164d330d95_z.jpg

打开QQ，把鼠标放在你的头像上不动，会弹出你一个框展示你的个人信息，这个框就是延时提示框，它不像：hover，鼠标离开后立即消失，而是在短暂的延迟后才消失，这个看似简单的小效果，在实际中用的非常多，而且其中的一些小细节也是值得揣摩的。

实现效果

谁能教我去掉水印>_<

原理分析

1. 用display属性控制div的显隐。
2. 用setTimeout()来控制延迟。

代码分析

最简单的控制div显隐。

window.onload = function (){
    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');

    oDiv1.onmouseover = function (){
        oDiv2.style.display = "block";
    };
    oDiv1.onmouseout = function (){
        oDiv2.style.display = "none";
    };
};

但是这样有个问题，鼠标一移出div1，div2就消失了，鼠标永远也到不了div2上，为了解决这个问题，我们给鼠标移出加上定时器。

    oDiv1.onmouseover = function (){
        oDiv2.style.display = "block";
    };
    oDiv1.onmouseout = function (){
        setTimeout(function (){
            oDiv2.style.display = "none";
        }, 800);
    };

现在因为有延迟的存在，鼠标可以移到div2上了，但是延迟一过，div2还是得消失，所以我们得给div2加上鼠标移入事件：鼠标移入div2时，display = "block"。

    oDiv2.onmouseover = function (){
        oDiv2.style.display = "block";
    };

打开浏览器试试，发现还是不行，延迟一过，div2还是消失了，怎么回事？因为setTimeout()就像一个定时炸弹一样，时间一到，该消失还是得消失，所以我们必须得在鼠标移入时关闭定时器，通常我们会声明一个timer用来存放定时器。

window.onload = function (){
    var oDiv1 = document.getElementById("div1");
    var oDiv2 = document.getElementById("div2");

    var timer = null;

    oDiv1.onmouseover = function (){
        oDiv2.style.display = "block";
    };
    oDiv1.onmouseout = function (){
        timer = setTimeout(function (){
            oDiv2.style.display = "none";
        }, 500);
    };
    oDiv2.onmouseover = function(){
        clearTimeout(timer);
        oDiv2.style.display = "block";
    };
};

这下总行了吧？其实有经验的同学应该能看出来，这样鼠标确实能移入div2了，但是从div2移出后div2并不会消失，因为没有移出事件，移出时应该把div2的display改为none，并且也应该加上定时器，同时，根据以往的经验，移出时加了定时器，在移入是应该关闭定时器，要不然鼠标回到div1时div2又消失了，而实际的效果应该是不论鼠标在div1上还是在div2上，div2都应该显示的，所以我们可以在每次鼠标移入div1时都先关闭定时器。

    var timer=null;
    
    oDiv1.onmouseover = function (){
        clearTimeout(timer);
        oDiv2.style.display = "block";
    };
    oDiv1.onmouseout = function (){
        timer = setTimeout(function (){
            oDiv2.style.display = "none";
        }, 800);
    };
    oDiv2.onmouseover = function (){
        oDiv2.style.display = "block";
        clearTimeout(timer);
    };
    oDiv2.onmouseout = function (){
        timer = setTimeout(function (){
            oDiv2.style.display = "none";
        }, 800);
    };

至此，我们的延时提示框已经完成了，没有bug。但是！我们仔细看看代码，有没有发现好像两个div的移入事件一样，移出事件也一样啊。伟大的党曾教导我们，代码能简化的要简化，写出的代码要优雅。so，我们简化合并一下。

window.onload = function (){
    var oDiv1 = document.getElementById("div1");
    var oDiv2 = document.getElementById("div2");

    var timer = null;
    
    oDiv2.onmouseover = oDiv1.onmouseover = function (){
        clearTimeout(timer);
        oDiv2.style.display = "block";
    };
    oDiv2.onmouseout = oDiv1.onmouseout = function (){
        timer = setTimeout(function (){
            oDiv2.style.display = "none";
        }, 800);
    };
};

分析总结

1. js中是可以用连等的，能用就用，代码将简化不少。

2. 一开始总会想当然地把程序想简单，可是一测试才知道少这少那，这是大家年轻时候的通病。也许是经历的多了，那些老师们、大神们无论面对看起来多么简单的问题都会严谨的分析，一丝不苟，这种态度，让我惭愧的同时，也让我感受到了一点作为程序员的情怀。