实现javascript的延期执行或者重复执行的两个函数

JavaScript031

实现javascript的延期执行或者重复执行的两个函数,第1张

以下内容摘录自《征服AJAX Web2.0开发技术详解》,今天在图书管看书觉得讲的挺好的,特此摘录!小部分内容和代码做了改动!

window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行;而后者则可以使一段代码每过指定时间就运行一次。它们的原型如下:

复制代码

代码如下:

window.setTimeout(expression,milliseconds)

window.setInterval(expression,milliseconds)

其中,expression可以是用引号括起来的一段代码,也可以是一个函数名,到了指定的时间,系统便会自动调用该函数,当使用函数名作为调用句柄时,不能带有任何参数;而使用字符串时,则可以在其中写入要传递的参数。两个方法的第二个参数是milliseconds,表示延时或者重复执行的毫秒数。下面分别介绍两种方法。

1.window.setTimeout方法 该方法可以延时执行一个函数,例如:

一秒后会弹出"hello"

[Ctrl+A

全选

注:如需引入外部Js需刷新才能执行]

这段代码将使得页面打开5秒钟后显示对话框“hello”。其中最后一句也可以写为:

window.setTimeout("hello()",1000)

读者可以体会它们的差别,在window.setInterval方法中也有这样的性质。

如果在延时期限到达之前取消延执行,可以使用window.clearTimeout(timeoutId)方法,该方法接收一个id,表示一个定时器。这个id是由setTimeout方法返回的,例如:

[Ctrl+A

全选

注:如需引入外部Js需刷新才能执行]

这样,如果要取消显示,只需单击页面任何一部分,就执行了window.clearTimeout方法,使得超时操作被取消。

2.window.setInterval方法

该方法使得一个函数每隔固定时间被调用一次,是一个很常用的方法。如果想要取消定时执行,和clearTimeout方法类似,可以调用window.clearInterval方法。clearInterval方法同样接收一个setInterval方法返回的值作为参数。例如:

复制代码

代码如下:

//定义一个反复执行的调用

var id=window.setInterval("somefunction",10000)

//取消定时执行

window.clearInterval(id)

上面的代码仅用于说明怎样取消一个定时执行。实际上在很多场合都需要用到setInterval方法,下面将设计一个秒表,来介绍setInterval函数的用途:该秒表将包括两个按钮和一个用于显示时间的文本框。当单击开始按钮时开始计时,最小单位为0.01秒,此时再次单击按钮则停止计时,文本框显示经过的时间。另外一个按钮用于将当前时间清零。其实现代码如下:

New

Document

[Ctrl+A

全选

注:如需引入外部Js需刷新才能执行]

延迟执行,一般是用定时器,定时器有两种,一种是setInterval,另一个是setTimeout。

setInterval,是间隔执行,次数为无限次。

setTimeout,是隔一段时间,执行一次。

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

setTimeout() 和setInterval() 几乎是一样的,仅执行次数不同和单词不同而已。关闭setTimeout() 是用clearTimeout()

下面举一个setInterval的例子,仅供参考:

<style>    

div {width:100px height:100px position:absolute top:50px left:50px background:#ccc}    

</style>    

<script>    

window.onload=function(){    

var oDiv = document.getElementById('div1')    

var nLeft = parseInt(oDiv.currentStyle?oDiv.currentStyle.left:getComputedStyle(oDiv,false).left)    

var timer = setInterval(function(){    //开启定时器,

nLeft++    

document.title=nLeft    

oDiv.style.left=nLeft+'px'    

if(nLeft == 500)    

{    

clearInterval(timer)    //当left值为500时,关闭定时器。

}

    

},30)    

    

}    

</script>    

</head>    

<body>    

<div id="div1"></div>

J s延迟加载的方式有哪些?

给javascript标签添加 defer和async属性。

defer和async的区别是什么?

1、defer和async都是使script异步加载的意思,当都没有设置这个属性的时候,html的加载会被阻塞等着script加载完成和执行完成后再渲染页面。

2、当设置了async时,异步加载,一旦加载完成则阻塞html渲染,进行执行,而且如果有多个script标签则谁先加载完,谁先执行。

3、当设置了defer时,异步加载,不会阻塞html,待html渲染完毕后再进行script执行。

注意:ie只支持defer