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^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

在这里插入图片描述

BOM系列之定时器

目录