BOM系列之定时器

---

window 对象给我们提供了 2 个非常好用的方法-定时器。

• setTimeout()
• setInterval()

1、setTimeout() 炸弹定时器

WindowOrWorkerGlobalScope 混合的 setTimeout()方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。

1.1、开启定时器

var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);

1.1.1、参数

• function

function 是你想要在到期时间 (delay毫秒) 之后执行的函数。

• code

这是一个可选语法，你可以使用字符串而不是function ，在delay毫秒之后编译和执行字符串 (使用该语法是不推荐的， 原因和使用 eval()一样，有安全风险)。

• delay

可选
延迟的毫秒数 (一秒等于 1000 毫秒)，函数的调用会在该延迟之后发生。如果省略该参数，delay 取默认值 0，意味着“马上”执行，或者尽快执行。不管是哪种情况，实际的延迟时间可能会比期待的 (delay 毫秒数) 值长，原因请查看实际延时比设定值更久的原因：最小延迟时间。

• arg1, …, argN

可选
附加参数，一旦定时器到期，它们会作为参数传递给function

1.1.2、返回值

返回值timeoutID是一个正整数，表示定时器的编号。这个值可以传递给clearTimeout()来取消该定时器。

1.1.3、示例

<script> // 回调函数是一个匿名函数 setTimeout(function () {
       console.log("时间到了"); }, 2000); function callback() {
       console.log("爆炸了"); } // 回调函数是一个有名函数 var timer1 = setTimeout(callback, 3000); var timer2 = setTimeout(callback, 5000); </script>

1.2、停止定时器clearTimeout()

WindowOrWorkerGlobalScope 内置的clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器。

1.2.1、语法

scope.clearTimeout(timeoutID)

1.2.2、参数

• timeoutID

您要取消定时器的标识符。该 ID 由相应的setTimeout()调用返回。

1.2.3、描述

传入一个错误的 ID 给 clearTimeout()不会有任何影响；也不会抛出异常。

1.2.4、示例

<button>点击停止定时器</button>
<script> var btn = document.querySelector("button"); // 开启定时器 var timer = setTimeout(function () {
       console.log("爆炸了"); }, 5000); // 给按钮注册单击事件 btn.addEventListener("click", function () {
       // 停止定时器 clearTimeout(timer); }); </script>

2、setInterval() 闹钟定时器

Window 和 Worker 接口提供的 setInterval() 方法重复调用一个函数或执行一个代码片段，在每次调用之间具有固定的时间间隔。

它返回一个 interval ID，该 ID 唯一地标识时间间隔，因此你可以稍后通过调用 clearInterval() 来移除定时器。

2.1、开启定时器

var intervalID = setInterval(func, [delay, arg1, arg2, ...]);
var intervalID = setInterval(function[, delay]);
var intervalID = setInterval(code, [delay]);

2.1.1、参数

• func

要重复调用的函数，每经过指定 delay 毫秒后执行一次。第一次调用发生在 delay 毫秒之后。

• code

这个语法是可选的，你可以传递一个字符串来代替一个函数对象，你传递的字符串会被编译然后每经过 delay 毫秒执行一次。这个语法因为与 eval() 存在相同的安全风险所以不推荐使用。

• delay

是每次延迟的毫秒数（一秒等于 1000 毫秒），函数的每次调用会在该延迟之后发生。如果未指定，则其默认值为 0。参见下方的延迟限制以了解详细的 delay 的取值范围。

• arg1, …, argN

可选
当定时器过期的时候，将被传递给 func 函数的附加参数。

2.1.2、返回值

返回值 intervalID 是一个非零数值，用来标识通过 setInterval() 创建的定时器，这个值可以用来作为 clearInterval() 的参数来清除对应的定时器。

2.1.3、示例

<script> // 1. setInterval setInterval(function () {
       console.log("继续输出"); }, 1000); </script>

2.2、停止定时器clearInterval()

WindowOrWorkerGlobalScope mixin 的 clearInterval() 方法可取消先前通过 setInterval() 设置的重复定时任务。

2.2.1、语法

scope.clearInterval(intervalID)

2.2.2、参数

intervalID
要取消的定时器的 ID。是由 setInterval() 返回的。

2.2.3、返回值

undefined

---

后记

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！