传智博客
快捷导航
蚂蚁部落
蚂蚁部落 网站首页 前端教程 JS教程 查看内容

栏目导航

≡基础知识≡

≡操作符≡

≡语句≡

≡函数≡

≡面向对象≡

≡对象≡

≡事件≡

≡事件对象≡

≡操作DOM方法≡

≡操作DOM属性≡

≡操作table表格≡

≡操作select控件≡

≡操作cookie≡

≡浏览器对象模型≡

≡进阶≡

JavaScript setTimeout()

2017-11-15 12:30| 发布者: admin| 查看: 405| 评论: 0|来自: 蚂蚁部落

传智播客

此方法可以在指定时间后调用回调函数,时间以毫秒为单位,属于window对象。

可以使用clearTimeout()终止setTimeout()方法的执行。

特别说明:凡是属于window对象的方法都可以直接使用,无需使用window对象调用。

更多关于window对象内容可以参阅JavaScript window 对象一章节。

语法结构:

[JavaScript] 纯文本查看 复制代码运行代码
setTimeout(code,interval)

参数解析:

(1).code:必需,要周期执行的代码。

(2).interval:必需,规定执行代码需要等待的时间,以毫秒计算。

浏览器支持:

(1).IE浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).opera浏览器支持此属性。

(5).火狐浏览器支持此属性。

(6).safria浏览器支持此属性。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
function show() {
  var odiv = document.getElementById("antzone");
  odiv.innerHTML = "本站的url地址是www.softwhy.com";
}
setTimeout(show,5000)
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

上面的代码可以在五秒后将指定内容写入到div中。

第一个参数可以是字符串:

setTimeout()方法的第一个参数通常是回调函数(推荐方式),不过也可以是字符串。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
function show() {
  var odiv = document.getElementById("antzone");
  odiv.innerHTML = "本站的url地址是www.softwhy.com";
}
setTimeout("show()",5000)
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

此时它对字符串参数的处理方式类似于eval()方法;不推荐使用此方式。

并且setTimeout()方法会在全局作用域查找通过字符串传递的函数,看如下代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
window.onload = function () {
  function show() {
    var odiv = document.getElementById("antzone");
    odiv.innerHTML = "本站的url地址是www.softwhy.com";
  }
  setTimeout("show()",5000)
}
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

上面的代码会报错,因为show()函数的声明并非在全局作用域。

传递第三个参数:

setTimeout()方法还可以接收第三个参数,此参数会被传递给被调用的回调函数。

这是ES5新增的语法结构,低版本的IE浏览器并不支持。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
function show(url) {
  var odiv = document.getElementById("antzone");
  odiv.innerHTML = "本站的url地址是"+url;
}
setTimeout(show,5000,"www.softwhy.com")
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

第三个参数会被作为show()函数的参数传递;为了兼容所有浏览器可以采用如下两种方式。

代码实例一:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
function show(url) {
  var odiv = document.getElementById("antzone");
  odiv.innerHTML = "本站的url地址是"+url;
}
setTimeout("show('www.softwhy.com')",5000)
</script>
</head>
<body>
  <div id="antzone"></div>
</body>
</html>

回调函数以字符串方式使用,可以直接传递参数,不过不推荐使用。

代码实例二:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
function show(url) {
  var odiv = document.getElementById("antzone");
  odiv.innerHTML = "本站的url地址是"+url;
}
setTimeout((function (url) {
  return function () {
    var odiv = document.getElementById("antzone");
    odiv.innerHTML = "本站的url地址是" + url;
  }
})("www.softwhy.com"), 5000)
</script>
</head>
<body>
  <div id="antzone"></div>
</body>
</html>

鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-11-19 20:22 , Processed in 0.070438 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部