您的位置：首页 > Web前端 > JavaScript

JavaScript中setTimeout()和setInterval()的使用以及区别

2017-02-20 22:07 716 查看

今天刚好在看setTimeout()的一个案例，在案例的解析中提到了setTimeout()和setInterval()的使用区别，但是比较理论，所以

决定自己也总结一下，写写例子帮助理解一下。

首先是说说这两个方法的具体时如何使用的。

1、setTimeout()方法

这个方法所有浏览器都支持，setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来

设定一个时间, 时间到了, 就会执行一个指定的 method。

定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。　　

语法: setTimeout(code,millisec) 　

参数： code （必需）：要调用的函数后要执行的 JavaScript 代码串。millisec（必需）：在执行代码前需等待的毫秒数。　

提示： setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

看完了基本的语法，接下来我写一个很简单的例子说明这个的使用方法。

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1> setTimeout()使用 </h1>
<p> 请等待三秒!</p>
</body>
<script>
setTimeout("alert('终于等到你了！')", 3000 )
</script>
</html>

当我们打开网页3秒时，就会弹出一个框。但是，只会弹出一次，因为 setTimeout()不会自动重复执行，是在载入后的延迟指定

时间去执行一次表达式。

当然，我们也可以让setTimeout()执行函数，而且可以重复执行多次，而不是一次。

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
var x = 0;
function countSecond()
{
x = x+1;
document.haorooms.haoroomsinput.value = x;
setTimeout("countSecond()", 1000)
}
</script>
</head>
<html>
<body>

<form name="haorooms">
<input type="text" name="haoroomsinput" value="0" size=4 >
</form>

<script>
countSecond();
</script>

</body>
</html>

实现的方法就是让函数自身反复调用。

2、setInterval()方法

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到

clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法: setInterval(code,millisec[,"lang"])

参数: code 必需。要调用的函数或要执行的代码串。millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

返回值: 一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

如果我们想要每隔3秒就弹出一个框要如何实现呢？

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

</body>
<script>
function test(){
this.name = "setInternal";
this.waitMes = function(){
var that = this;
setInterval(function(){
alert(that.name);
},3000);
}
}
var te = new test();
te.waitMes();
</script>
</html>

setInterval() 从载入后，每隔指定的时间就执行一次表达式。

3、区别

通过上面可以看出，setTimeout和setinterval的最主要区别是：

1）setTimeout只运行一次，也就是说设定的时间到后就触发运行指定代码，运行完后即结束。如果运行的代码中再次运行同样

的setTimeout命令，则可循环运行。（即要循环运行，需函数自身再次调用 setTimeout()）；而 setinterval是循环运行的，即每

到设定时间间隔就触发指定代码。这是真正的定时器。

2）setinterval使用简单，而setTimeout则比较灵活，可以随时退出循环，而且可以设置为按不固定的时间间隔来运行，比如第

一次1秒，第二次2秒，第三次3秒。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航