文章导航

JavaScript setTimeout()

2018-8-20 00:38| 作者: admin| 查看: 3502| 评论: 0|来自: 蚂蚁部落

setTimeout是JavaScript中定时器方法之一,另一个定时器方法是setInterval

由于使用频繁,它的重要性毋庸置疑,网上关于它的文章更是多如牛毛。

其中不乏优秀的文章,大多数文章存在一个问题,那就是重复度太高,只介绍最为基础的东西,很多重要的特性都没有涉及,本文将通过代码实例详细介绍一下setTimeout方法的用法。

此方法可以延迟指定时间再去执行规定的代码。

语法结构:

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

参数解析:

(1).code:必需,延迟指定时间后要执行的代码。

(2).interval:必需,规定要延迟的时间,单位是毫秒。

ES5中,还可以传递第三个参数,现在不做介绍,文章后面会有专门的实例代码演示。

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

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

浏览器支持:

(1).IE浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).谷歌浏览器支持此方法。

(4).opera浏览器支持此方法。

(5).火狐浏览器支持此方法。

(6).safria浏览器支持此方法。

特别说明:IE9+与其他标准浏览器支持传递第三个参数。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
function setStyle() {
  var odiv = document.getElementById("ant");
  odiv.style.color="red";
  odiv.style.backgroundColor="#ccc";
  odiv.style.textAlign="center";
  odiv.style.lineHeight="40px";
}
setTimeout(setStyle,2000)
</script>
</head>
<body>
<div id="ant">蚂蚁部落</div>
</body>
</html>

上面的代码会在2秒之后设置div元素的相关样式。

setTimeout第一个参数除了是回调函数(推荐使用)也可以是字符串。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
function setStyle() {
  var odiv = document.getElementById("ant");
  odiv.style.color="red";
  odiv.style.backgroundColor="#ccc";
  odiv.style.textAlign="center";
  odiv.style.lineHeight="40px";
}
setTimeout("setStyle()",2000)
</script>
</head>
<body>
<div id="ant">蚂蚁部落</div>
</body>
</html>

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

并且setTimeout方法会在全局作用域查找通过字符串传递的函数。

看如下代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  function setStyle() {
    var odiv = document.getElementById("ant");
    odiv.style.color="red";
    odiv.style.backgroundColor="#ccc";
    odiv.style.textAlign="center";
    odiv.style.lineHeight="40px";
  }
  setTimeout("setStyle()",2000)
}
</script>
</head>
<body>
<div id="ant">蚂蚁部落</div>
</body>
</html>

上面的代码会报错,谷歌控制台运行截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/22/091604lb411xa5q44q5co8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

因为这个时候setTimeout会在全局作用域查找setStyle函数,然而它是声明在函数作用域中。

传递第三个参数:

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

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

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
function setStyle() {
  var odiv = document.getElementById("ant");
  odiv.style.color=styleObj.color;
  odiv.style.backgroundColor=styleObj.bgColor;
  odiv.style.textAlign=styleObj.textAlign;
  odiv.style.lineHeight=styleObj.lineHeight;
}
let styleObj={
    color:"red",
    bgColor:"#ccc",
    textAlign:"center",
    lineHeight:"40px"
}
setTimeout(setStyle,2000,styleObj)
</script>
</head>
<body>
<div id="ant">蚂蚁部落</div>
</body>
</html>

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

代码实例一:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
function setStyle() {
  var odiv = document.getElementById("ant");
  odiv.style.color=styleObj.color;
  odiv.style.backgroundColor=styleObj.bgColor;
  odiv.style.textAlign=styleObj.textAlign;
  odiv.style.lineHeight=styleObj.lineHeight;
}
let styleObj={
    color:"red",
    bgColor:"#ccc",
    textAlign:"center",
    lineHeight:"40px"
}
setTimeout("setStyle(styleObj)",2000)
</script>
</head>
<body>
<div id="ant">蚂蚁部落</div>
</body>
</html>

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

代码实例二:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
let styleObj={
    color:"red",
    bgColor:"#ccc",
    textAlign:"center",
    lineHeight:"40px"
}
setTimeout((function(styleObj){
  return function setStyle() {
    var odiv = document.getElementById("ant");
    odiv.style.color=styleObj.color;
    odiv.style.backgroundColor=styleObj.bgColor;
    odiv.style.textAlign=styleObj.textAlign;
    odiv.style.lineHeight=styleObj.lineHeight;
  }
})(styleObj),2000)
</script>
</head>
<body>
<div id="ant">蚂蚁部落</div>
</body>
</html>

采用闭包的方式巧妙的实现了参数的传递。

说实话,以当前的软硬件发展速度,基本可以不用考虑低版本IE浏览器。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

下一篇:JavaScript 闭包

最新评论

返回顶部