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