前言
JavaScript定时器是Web开发中常用的工具，它们允许我们在指定的时间间隔内执行代码，从而实现定时任务和动态交互效果。本文将深入探索JavaScript定时器的不同类型和用法，并介绍如何实现精确的时间控制。
提示：以下是本篇文章正文内容，下面案例可供参考
一、一次性定时器setTimeout
标准：在指定的毫秒数后调用函数或计算表达式。
口语：使一段代码在指定时间后运行。
语法
setTimeout(code,millisec,lang)
| 参数 | 描述 |
|---|---|
| code | 必需。要调用的函数后要执行的 JavaScript 代码串。 |
| millisec | 必需。在执行代码前需等待的毫秒数。 |
| lang | 可选。脚本语言可以是：JScript VBScript JavaScript |
案例
<body>
<p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">我是按钮，点我</button>
<script>
function myFunction() {
setTimeout(function () {
alert("Hello")
}, 1000 * 3);
}
</script>
</body>
</html>
二、重复性定时器setInterval
标准：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
口语：可以使一段代码每过指定时间就运行一次。
语法
setInterval(code,millisec,lang)
| 参数 | 描述 |
|---|---|
| code | 必需。要调用的函数或要执行的代码串。 |
| millisec | 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。 |
| lang | 可选。 JScript VBScript JavaScript |
案例
<body>
<input id="clock" />
<button onclick="clearDate()">别变了，快停止吧，点我！</button>
<script type="text/javascript">
const id = setInterval(() => {
const date = new Date();
const time = date.toLocaleTimeString();
document.getElementById("clock").value = time;
}, 1000);
function clearDate() {
clearInterval(id)
}
</script>
</body>
</html>
三、时间的误差
setInterval指定的是开始执行之间的间隔，并不考虑每次任务执行本身所消耗的时间。因此实际上，两次执行之间的间隔会小于指定的时间。
比如，setInterval指定每100ms执行一次，每次执行需要5ms，那么第一次执行结束后95毫秒，第二次执行就会开始。如果某次执行耗时特别长，比如需要105毫秒，那么它结束后，下一次执行就会立即开始。
为了确保两次执行之间有固定的间隔，可以不用setInterval，而是每次执行结束后，使用setTimeout指定下一次执行的具体时间。
var i = 1;
var timer = setTimeout(function() {
alert(i++);
timer = setTimeout(arguments.callee, 2000);
}, 2000);
四、消除定时器
在使用定时器的时候，需要有一个好的习惯，那就是清除定时器，特别是对于重复型定时器，一定要及时清除。
五、定时器清除的方法
相对于两种创建定时器的方法，Js也给出了相对应的清除方法，分别是clearTimeout(obj)和clearInterval(obj)。
在看到这两种方法都是接收一个参数，这个参数就是定时器的标识，这个标识在使用定时器的时候被定义用来接收定时器方法的变量。
案例
// 一秒之后打印
const test1 = setTimeout(function(){
console.log('hello world')
},1000);
// 每秒打印一次
const test2 = setInterval(function(){
console.log('hello world')
},1000)
// 清理定时器
clearTimeout(test1);
clearInterval(test2)
原理
JavaScript语言特性
JavaScript是一门基于对象的弱类型语言，它作为浏览器脚本语言，主要用途是负责与页面的交互，以及操作DOM。
重点来了，JavaScript的执行环境是单线程的，即默认情况下是同步加载的，也就是说 JavaScript的加载是阻塞的。在同一时间内JavaScript只能完成一件事，自上而下执行，下面的代码等待上面的代码解析完成。
总结
JavaScript引擎是单线程，它会强制异步事件排队等待执行；
setTimeout和setInterval执行原理是不一样的，需要注意他们的执行时间的影响；
如果一个一次性定时器（setTimeout）被阻塞了，它会等待直到有合适的执行时间（等待时间有可能比它定义的延迟时间长）；
如果重复性定时器（setInterval）回调函数执行时间很长（长于定义的间隔时间）的话，间隔定时器有可能无间隔的持续执行。
633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
