JavaScript 定时器详解：setTimeout 与 setInterval 机制及实践

JavaScript 定时器概述

JavaScript 作为单线程语言，允许通过设定超时值或间歇时间值，来指定代码在特定时刻执行。其中，超时值指在指定时间后执行代码，而间歇时间值指每隔指定时间重复执行一次代码。

超时调用（setTimeout）详解

超时调用机制

超时调用通过 window 对象的 setTimeout() 方法实现，该方法接收两个参数：待执行的代码以及以毫秒为单位的等待时间。第一个参数可以是字符串（与 eval() 中使用的字符串类似）或函数。

第二个参数指定等待的毫秒数，但时间到达后代码不一定立即执行。由于 JavaScript 是单线程解释器，单位时间内只能执行一段代码，因此存在一个任务队列来控制执行顺序。任务按添加顺序执行，setTimeout() 的第二个参数决定当前任务何时被加入队列。若队列为空，代码立即执行；若队列非空，则需等待前序代码执行完毕。

调用 setTimeout() 后，会返回一个数值 ID，即超时调用 ID，它是计划执行代码的唯一标识。可通过调用 clearTimeout() 方法来取消该超时调用。

间歇调用（setInterval）详解

间歇调用机制

间歇调用与超时调用类似，但会按指定时间间隔重复执行代码，直到间歇调用被取消或页面卸载。设置间歇调用的方法是 setInterval()，其接收参数与 setTimeout() 相同。值得注意的是，取消间歇调用的重要性远高于超时调用。

通常情况下，很少直接使用间歇调用，因为后一个间歇调用可能在前一个执行结束前就被触发。因此，通常推荐使用超时调用来模拟间歇调用的行为。

定时器实战示例

下面通过两个示例进行演示：

1. 获取当前日期并显示在文本框中，点击“Stop”按钮后停止事件（间歇调用示例）。

HTML 代码结构如下：

<input type="text" size="50" id="clock" />
<input type="button" value="Stop" id="btn" />

对应的 JavaScript 逻辑为：

function clock(){
  var time = new Date();
  document.getElementById("clock").value = time;  
  var btn =document.getElementById("btn");
  btn.onclick = function(){
    clearInterval(t); 
  }
}
var t = setInterval(clock,1000);

2. 使用 setTimeout() 实现计数统计效果，并在文本框中显示数值。

HTML 代码结构如下：

<input type="text" id="count" />

对应的 JavaScript 逻辑为：

var num = 0;
function startCount(){
  document.getElementById("count").value = num;
  num += 1;
  setTimeout(startCount,1000);  //setTimeout是超时调用，使用递归模拟间歇调用
}  
setTimeout(startCount,1000);  //1s后执行

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。