setTimeout(code,millisec)
code:要调用的函数后要执行的 JavaScript 代码串。
millisec:在执行代码前需等待的毫秒数。
1. jquery的$.delay()方法设置一个延时来推迟执行队列中之后的项目。这个方法不能取代JS原生的setTimeout。
The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.
例子:在.slideUp() 和 .fadeIn()之间延时800毫秒。
HTML 代码:
<div id="foo /">
jQuery 代码:
$('#foo').slideUp(300).delay(800).fadeIn(400)
2. 通过循环消耗cpu
function sleep(n) {
var start = new Date().getTime()
while(true) if(new Date().getTime()-start >n) break
}
3. 用setTimeout。
假设有三个步骤,步骤之间需要暂停一段时间;可以采用如下的方法:
function firstStep() {
//do something
setTimeout("secondStep()", 1000)
}
function secondStep() {
//do something
setTimeout("thirdStep()", 1000)
}
function thirdStep() {
//do something
}
使用一个闭包就搞定了
<html><head>
<style type="text/css">
*{margin:0padding:0} #div1{position:absolute} li{list-style-type:nonetext-align:centerwidth:70pxheight:30pxline-height:30px}
#zg li{background:bluefloat:left} #zg li #bj li{background:green} #zg
li #bj li #xc li{background:red} #xc,#sjz{position:relativeleft:70pxtop:-30px}
#dc{position:relativeleft:70pxtop:-60px} #bj{display:none} #hb{display:none}
#xc{display:none} #dc{display:none}
</style>
<script type="text/javascript">
onload = function()
{
var lis = document.getElementsByTagName("li")
for (var i = 0 i < lis.length i++) {
lis[i].onmouseover = function()
{
var p = this
setTimeout(function() {
return function(parent) {
parent.children[0] ? parent.children[0].style.display = "block": 0
} (p)
},
500)
}
lis[i].onmouseout = function()
{
this.children[0] ? this.children[0].style.display = "none": 0
}
}
}
</script>
</head>
<body>
<div id="div1">
<ul id="zg">
<li>
北京
<ul id="bj">
<li>
西城区
<ul id="xc">
<li>
西单
</li>
<li>
西单
</li>
<li>
西单
</li>
</ul>
</li>
<li>
东城区
<ul id="dc">
<li>
东单
</li>
<li>
东单
</li>
<li>
东单
</li>
</ul>
</li>
<li>
崇文区
</li>
</ul>
</li>
<li>
河北
<ul id="hb">
<li>
石家庄
<ul id="sjz">
<li>
桥东
</li>
<li>
桥东
</li>
<li>
桥东
</li>
</ul>
</li>
<li>
保定
</li>
<li>
邢台
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>