定时器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/...

相关推荐
Channing Lewis1 小时前
如何实现网页不用刷新也能更新
前端
好评笔记2 小时前
AIGC视频扩散模型新星:Video 版本的SD模型
论文阅读·深度学习·机器学习·计算机视觉·面试·aigc·transformer
努力搬砖的程序媛儿2 小时前
uniapp广告飘窗
前端·javascript·uni-app
程序员小灰2 小时前
当了leader才发现,大厂最想裁掉的,不是上班总迟到的,也不是下班搞失联的,而是经常把这3句话挂在嘴边的!
面试
dfh00l2 小时前
firefox屏蔽debugger()
前端·firefox
张人玉2 小时前
小白误入(需要一定的vue基础 )使用node建立服务器——vue前端登录注册页面连接到数据库
服务器·前端·vue.js
大大。2 小时前
element el-table合并单元格
前端·javascript·vue.js
一纸忘忧2 小时前
Bun 1.2 版本重磅更新,带来全方位升级体验
前端·javascript·node.js
杨.某某2 小时前
若依 v-hasPermi 自定义指令失效场景
前端·javascript·vue.js
猫猫村晨总2 小时前
基于 Vue3 + Canvas + Web Worker 实现高性能图像黑白转换工具的设计与实现
前端·vue3·canvas