打開QQ忱叭，把鼠標(biāo)放在你的頭像上不動管挟，會彈出你一個框展示你的個人信息轿曙，這個框就是延時提示框，它不像：hover僻孝，鼠標(biāo)離開后立即消失导帝，而是在短暫的延遲后才消失，這個看似簡單的小效果穿铆，在實際中用的非常多您单，而且其中的一些小細(xì)節(jié)也是值得揣摩的。
實現(xiàn)效果
原理分析
- 用display屬性控制div的顯隱荞雏。
- 用setTimeout()來控制延遲虐秦。
代碼分析
<style>
div{ float: left; margin-left: 20px; }
#div1{ width: 50px; height: 50px; background: red; }
#div2{ width: 250px; height: 180px; background: #CCC; }
</style>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
最簡單的控制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";
};
};
但是這樣有個問題凤优，鼠標(biāo)一移出div1悦陋，div2就消失了，鼠標(biāo)永遠(yuǎn)也到不了div2上别洪，為了解決這個問題叨恨，我們給鼠標(biāo)移出加上定時器。
oDiv1.onmouseover = function (){
oDiv2.style.display = "block";
};
oDiv1.onmouseout = function (){
setTimeout(function (){
oDiv2.style.display = "none";
}, 800);
};
現(xiàn)在因為有延遲的存在挖垛，鼠標(biāo)可以移到div2上了痒钝，但是延遲一過，div2還是得消失痢毒，所以我們得給div2加上鼠標(biāo)移入事件：鼠標(biāo)移入div2時送矩，display = "block"。
oDiv2.onmouseover = function (){
oDiv2.style.display = "block";
};
打開瀏覽器試試哪替，發(fā)現(xiàn)還是不行栋荸，延遲一過，div2還是消失了凭舶，怎么回事晌块？因為setTimeout()就像一個定時炸彈一樣，時間一到帅霜，該消失還是得消失匆背，所以我們必須得在鼠標(biāo)移入時關(guān)閉定時器，通常我們會聲明一個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";
};
};
這下總行了吧钝尸？其實有經(jīng)驗的同學(xué)應(yīng)該能看出來括享，這樣鼠標(biāo)確實能移入div2了，但是從div2移出后div2并不會消失珍促，因為沒有移出事件铃辖，移出時應(yīng)該把div2的display改為none，并且也應(yīng)該加上定時器猪叙，同時娇斩，根據(jù)以往的經(jīng)驗，移出時加了定時器穴翩，在移入是應(yīng)該關(guān)閉定時器成洗，要不然鼠標(biāo)回到div1時div2又消失了，而實際的效果應(yīng)該是不論鼠標(biāo)在div1上還是在div2上藏否，div2都應(yīng)該顯示的，所以我們可以在每次鼠標(biāo)移入div1時都先關(guān)閉定時器充包。
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);
};
至此副签，我們的延時提示框已經(jīng)完成了，沒有bug基矮。但是淆储！我們仔細(xì)看看代碼，有沒有發(fā)現(xiàn)好像兩個div的移入事件一樣家浇，移出事件也一樣啊本砰。偉大的黨曾教導(dǎo)我們，代碼能簡化的要簡化钢悲，寫出的代碼要優(yōu)雅点额。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);
};
};
分析總結(jié)
js中是可以用連等的还棱，能用就用，代碼將簡化不少惭等。
一開始總會想當(dāng)然地把程序想簡單珍手，可是一測試才知道少這少那，這是大家年輕時候的通病辞做。也許是經(jīng)歷的多了琳要，那些老師們、大神們無論面對看起來多么簡單的問題都會嚴(yán)謹(jǐn)?shù)姆治龀用唤z不茍稚补，這種態(tài)度，讓我慚愧的同時嫂伞，也讓我感受到了一點作為程序員的情懷孔厉。
