JS定时器setTimeout和setInterval介绍

90 阅读 0 评论 60 点赞

我是靠谱客的博主飘逸枫叶，这篇文章主要介绍JS定时器setTimeout和setInterval介绍，现在分享给大家，希望可以做个参考。

JS定时器setTimeout和setInterval介绍

JavaScript 定时器，有时也称为“计时器”，用来在经过指定的时间后执行某些任务。avaScript 中提供了两种方法来设置定时器，分别是 setTimeout() 和 setInterval()。

window.setTimeout - Web API 接口参考 | MDN

setInterval() - Web API 接口参考 | MDN

setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式，只会执行一次；而setInterval()方法则可以按照指定的周期（单位为毫秒）来重复执行函数或表达式，直到clearInterval把它清除或者手动关闭浏览器窗。

注意setTimeout()只执行一次，setInterval()可以执行多次。

setTimeout()语法格式如下：

setTimeout(function[, delay, arg1, arg2, ...]);

setTimeout(function[, delay]);

setTimeout(code[, delay]);

参数说明：

function：一个函数（通常使用匿名函数），其中定义了定时器中要执行的代码；

code：字符串类型的代码，这些代码会在定时器到期后被编译执行，出于安全考虑不建议使用；

delay：可选参数，定时器在执行的其中代码之前，要等待的时间，单位为毫秒（1秒 = 1000毫秒），如果省略此参数，则其默认值为 0；

arg1、arg2、...、argN：要传递给函数的参数。

提示：setTimeout()只执行一次，但可以让被执行的代码里面自身再次调用 setTimeout() 方法已达到多次执行的目的。

setInterval()语法格式如下：

setInterval(function, delay, [arg1, arg2, ...]);

setInterval(code, delay);

参数说明：

function：一个函数（通常使用匿名函数），其中定义了定时器中要执行的代码；

code：字符串类型的代码，这些代码会在定时器到期后被编译执行，出于安全考虑不建议使用；

delay：可选参数，定时器在执行的其中代码之前，要等待的时间，单位为毫秒（1秒 = 1000毫秒），如果省略此参数，则其默认值为 0；

arg1、arg2、...、argN：要传递给函数的参数。

请注意，每次调用回调函数之间经过的实际时间可能会比给定的 delay 长，在浏览器中，setTimeout()/setInterval() 的每调用一次定时器的最小间隔是 4ms，这通常是由于函数嵌套导致（嵌套层级达到一定深度），或者是由于已经执行的 setInterval 的回调函数阻塞导致的。

setTimeout()和setInterval()的返回值是正整数，表示定时器的编号。需要注意的是setTimeout()和 setInterval()共用一个编号池，技术上，取消该定时器clearTimeout()和clearInterval()可以互换。但是，为了避免混淆，不要混用取消定时函数，而要用clearTimeout()方法取消先前通过setTimeout()建立的定时器；用clearInterval()方法取消先前通过setInterval()设置的重复定时器。

下面用setInterval实现计数器功能，每秒（1000ms)累加1一次，先看效果：

源码如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用setInterval实现计数器功能</title>
<style>
div{
  height: 30px;
}
</style>
<script>
    var t;
    var k = 0;
    function start() {
        k += 1;
        document.getElementById("num").innerHTML = k;
        document.getElementById("num2").value = k;
    }

    function startCount() {
        t = setInterval(start, 1000);
    }

   function stopCount() {
       clearTimeout(t);
   }

</script>
</head>
<body>
<p>用setInterval实现计数器功能，每秒（1000ms)累加1一次</p>
<div id="num"> </div>
<input type="text" id="num2">
<input type="button" onclick="startCount()" value="开始">
<input type="button" onclick="stopCount()" value="停止">
</body>
</html>

下面给出循环逐字输出字符串的例子，先看效果图：

源码如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>setInterval测试</title>
<script>
var str = "循环逐字输出本句！";
var seq = 0;
var second=1000; //间隔时间1秒钟
function scroll() {
  msg = str.substring(0, seq+1);
  document.getElementById('word').innerHTML = msg;
  seq++;
  if (seq >= str.length) seq = 0;
}
</script>
</head>
<body onload="setInterval('scroll()',second)">
<h2 id="word"></h2>
</body>
</html>