【JS-1】

定时器有哪些用法？

分享人：王熠(yì)华

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

在js应用中，定时器的作用就是可以设定当到达一个时间来执行一个函数，或者每隔几秒重复执行某段函数。这里面涉及到了三个函数方法：setInterval()、setTimeout()、clearInterval()，本文将围绕这三种函数的用法，来实现定时器的功能。

2.知识剖析

setTimeout 将函数的执行推迟到一段时间之后再执行。

setInterval 让函数间隔一段时间周期性执行。

这两个方法并不存在于 JavaScript 的规范中。但是大多数运行环境都有内置的调度器，而且也提供了这两个方法的实现。目前来讲，所有浏览器，包括 Node.js 都支持这两个方法。

使用语法：
setTimeout
let timerId = setTimeout(func|code, delay[, arg1, arg2...])

参数说明：
func|code ：想要执行的函数或代码字符串。 一般传入的都是函数，介于某些历史原因，代码字符串也支持，但是不建议使用这种方式。

delay ：执行前的延时，以毫秒为单位（1000 毫秒 = 1 秒）；

arg1，arg2… ：要传入被执行函数（或代码字符串）的参数列表（IE9 以下不支持）

setTimeout()、setInterval()的区别在于

setTimeout()：当方法执行完成定时器就立即停止(但是定时器还在,只不过没用了);

setInterval()：当方法执行完成,定时器并没有停止,以后每隔[interval]这么长的时间都会重新的执行对应的方法[function],直到我们手动清除定时器为止;

意思就是： setTimeout()时间到了只会执行一次，setInterval()不会停止，会不间断的执行对应的函数，直到我们手动暂停或窗口被关闭。

如何暂停setTimeout()、setInterval():

clearTimeout（）取消由setTimeout() 方法设置的 timeout。

clearInterval() ，这个函数只有一个作用，就是暂停setInterval()调用函数。

3.常见问题

弹窗会让 Chrome/Opera/Safari 内的时钟停止。

在众多浏览器中，IE 和 Firefox 在显示 alert/confirm/prompt 时，内部的定时器仍旧会继续滴答，但是在 Chrome、Opera 和 Safari 中，内部的定时器会暂停/冻结。

所以，在执行以上代码时，如果在一定时间内没有关掉 alert 弹窗，那么在你关闭弹窗后，Firefox/IE 会立即显示下一个 alert 弹窗（前提是距离上一次执行超过了 2 秒），而 Chrome/Opera/Safari 这三个则需要再等待 2 秒以上的时间才会再显示（因为在 alert 弹窗期间，定时器并没有滴答）。

都不能保证延时的准确性

4.解决方案

5.代码实战

6.拓展思考

7.参考文献

参考：调度：setTimeout 和 setInterval

参考：你所不知道的setInterval

8.更多讨论

鸣谢

感谢大家观看

BY : 王熠华