定时器setTimeout和setInterval

在前端开发中,定时器是一项重要的功能,它允许我们在指定的时间后执行代码。常见的定时器有两种:setTimeoutsetInterval

一、setTimeout

setTimeout是一个延时执行定时器,它会在指定的延时时间后执行一次指定的函数或代码块。其语法如下:

js 复制代码
setTimeout(function, delay, param1, param2, ...);
  • function:要执行的函数或代码块。
  • delay:延迟的毫秒数。
  • param1, param2, ...:可选参数,传递给函数的参数。

示例:

js 复制代码
let time = setTimeout(() => {
  console.log("Hello, world!");
}, 2000);

上述代码将在2秒后打印"Hello, world!"。

需要注意的是,setTimeout的延迟时间并不是绝对精确的,它通常会比设定的时间长一些,具体取决于当时JavaScript的执行情况。另外,如果设置了多个setTimeout,且不及时清除(使用clearTimeout),它们可能会互相干扰,使延迟时间更加难以预测。

二、setInterval

setInterval是一个重复执行定时器,它会在指定的时间间隔内重复执行指定的函数或代码块。其语法如下:

js 复制代码
let intervalId = setInterval(function, delay, param1, param2, ...);
  • function:要执行的函数或代码块。
  • delay:时间间隔的毫秒数。
  • param1, param2, ...:可选参数,传递给函数的参数。
  • intervalId:返回的定时器ID,用于清除定时器。

示例:

js 复制代码
let intervalId = setInterval(() => { console.log('hello, world'); }, 2000);

上述代码将每隔2秒打印一次"hello, world"。

需要注意的是,setInterval并不关心上一次函数执行的结果,而是每隔指定的时间间隔就将函数放入主线程队列。如果上一次函数执行时间过长,下一次函数的执行时间可能会受到影响,导致实际的时间间隔比设定的长。

三、定时器的取消

  • clearTimeout(timeoutId):用于取消由setTimeout设置的定时器。
  • clearInterval(intervalId):用于取消由setInterval设置的定时器。

示例:

js 复制代码
// 取消setTimeout定时器
let time = setTimeout(() => {
  console.log("This will not be printed");
}, 5000);
clearTimeout(time);
 
// 取消setInterval定时器
let intervalId = setInterval(() => {
  console.log('This will print repeatedly');
}, 1000);
setTimeout(() => {
  clearInterval(intervalId);
  console.log('Timer stopped');
}, 5000);

五、注意事项

1. 延迟参数的设置范围

一、最大延迟值

(1)理论最大值

在JavaScript中,延时时间是一个32位有符号整数。因此,其最大值是2^31-1,即2147483647毫秒(大约24.8天)。

一旦设置的延迟值超过了这个最大值,它将被截断为2147483647毫秒。

(2)实际限制

尽管理论上的最大值是2147483647毫秒,但一些浏览器可能会对延时值有不同的限制。

因此,在编写代码时,最好不要依赖于超过24.8天的延时时间。

二、最小延迟值

(1)浏览器限制

浏览器通常会限制setTimeout的最小延时为4毫秒,即使你设置了小于4毫秒的延迟时间,它也会至少等待4毫秒后再执行代码。这意味着即使你设置为 0ms,实际的执行时间也可能在 4ms 或更高。

这一限制是为了确保执行栈的清空和避免竞态条件。

(2) 特殊情况

在某些情况下,如使用requestAnimationFrame进行动画时,由于它与屏幕刷新同步,因此可能会受到显示器刷新率的影响,导致实际延迟时间略有不同。

三、时间参数为负数

在JavaScript中,setTimeoutsetInterval函数的延迟参数通常不应设置为负数。然而,尽管设置为负数在技术上可能不会产生语法错误,但其行为并不是由标准明确规定的,且可能因浏览器而异。

当你给setTimeoutsetInterval的第二个参数传递一个负数时,如-1毫秒,大多数现代浏览器会将其视为0毫秒,意味着定时器会"立即"执行

js 复制代码
let time = setTimeout(() => {
  console.log("Hello, world!");
}, -1);


let time1 = setInterval(() => {
  console.log("Hello, world!");
}, -1);
2. 返回值

setTimeout返回一个整数类型的定时器ID(timeoutId),用于后续取消定时器。这个ID是一个由浏览器分配的唯一标识符。

setInterval同样返回一个整数类型的定时器ID(intervalId),用于取消定时器。

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" http-equiv="">
  <title>Disabled Input Placeholder</title>
  <style>

  </style>
</head>

<body>

  <script>
    let time = setTimeout(() => {
      console.log("Hello, world!");
    }, 1000);
    console.log(time);
    console.log(typeof time);
  </script>

</body>

</html>
3. 清除定时器
js 复制代码
let time = setTimeout(() => {
  console.log("Hello, world!");
  clearInterval(time)
}, 1000);

使用了clearInterval来尝试清除一个由setTimeout设置的定时器,尽管JavaScript引擎不会因为这个错误而抛出异常,,但setTimeout设置的定时器将会被清除,并且它将在1秒后正常执行其回调函数。

js 复制代码
let time = setInterval(() => {
  console.log("Hello, world!");
  clearTimeout(time)
}, 1000);

使用了clearTimeout来尝试清除一个由setInterval设置的定时器,尽管JavaScript引擎不会因为这个错误而抛出异常,但它将在1秒后正常执行其回调函数,并且setInterval设置的定时器将会被清除,没有循环执行这个定时器。

详细参考:developer.mozilla.org/zh-CN/docs/...

相关推荐
掘金一周10 小时前
Flutter Riverpod 3.0 发布,大规模重构下的全新状态管理框架 | 掘金一周 9.18
前端·人工智能·后端
一涯10 小时前
页面出现空白区域
前端
moisture10 小时前
CUDA常规知识点
后端·面试
spmcor10 小时前
MinIO本地对象存储部署指南
前端
zcychong10 小时前
ArrayMap、SparseArray和HashMap有什么区别?该如何选择?
android·面试
少年纪10 小时前
前端用 pdf.js 将 PDF 渲染到 Canvas 再转图片,文字消失的坑
前端
RoyLin11 小时前
TypeScript设计模式:复合模式
前端·后端·typescript
我是天龙_绍11 小时前
CSS/JS/图片全挂了,部署后页面白屏/资源加载失败?这两个配置项坑了多少人!
前端
我的小月月11 小时前
SQLFE:网页版数据库(VUE3+Node.js)
前端·后端
小高00711 小时前
🌐ES6 这 8 个隐藏外挂,知道 3 个算我输!
前端·javascript·面试