js中帮我加一个延时2秒吧。谢谢

JavaScript017

js中帮我加一个延时2秒吧。谢谢,第1张

js中延迟2秒可以调用setTimeout()方法:

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>