Kros的博客 Kros的博客
首页
  • CSS
  • 工具
  • Vue
  • js
  • Vue3
  • 算法
  • 折腾笔记
一言
  • 分类
  • 标签
  • 归档
码云

Kros

凡心所向,素履以往,生如逆旅,一苇以航
首页
  • CSS
  • 工具
  • Vue
  • js
  • Vue3
  • 算法
  • 折腾笔记
一言
  • 分类
  • 标签
  • 归档
码云
  • CSS

  • JavaScript

    • 兼容ie7的水平无限滚动
    • 节流防抖
    • 数组乱序
    • 开启全屏
    • 数据类型
    • 变量提升
    • this调用指向
    • 原型及原型扩展
    • js获取元素属性精度问题
    • setTimeout和setInterval
    • 数组判断
    • dom节点添加或插入元素
    • var、let和const的区别
    • 判断ellipsis是否省略生效
    • 使用ResizeObserver监听元素size变化
    • js自定义事件
    • use strict详解
    • 私有属性
    • js实现类的方式
    • call和apply的理解和使用
    • js失焦和点击事件顺序冲突
    • js中不常见但非常实用的运算符
    • for of和for in的区别
    • defer和async的区别
    • promise值穿透
    • js为什么会出现数字精确度丢失
    • js禁用F12开发者模式
    • 使用scrollTop和scrollTo滚动到目标位置
    • js实现打字机效果
    • 多种方式实现数组去重
    • 替换使用setTimeout
    • encodeURI和encodeURIComponent的区别
    • canvas实现弹跳小球
    • js实现跨标签页通信
    • 事件循环与微任务、宏任务
    • 浏览器存储数据方式
    • 常见的meta元数据使用
    • 使用InterSectionObserver判断元素区域(chatGPT)
  • 工具

  • Vue

  • antdv踩坑记录

  • Vue3

  • 前端
  • JavaScript
kros
2022-01-28

setTimeout和setInterval

每种框架运行环境中都有特定的计划调度,那么js和Node.js环境下的计划调度就不得不说setTimeout和setInterval。

# 定时器setTimeout

定时执行,只执行一次

let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)
1

参数

# func|code

func指的是你需要定时执行的函数;code指需要运行的js字符串,code的执行原理同eval(),该操作有风险不建议使用

# delay

延迟毫秒数,默认为0毫秒。但因为js引擎中的任务队列 和函数嵌套所以会存在一个最小延时 ,最小间隔是4ms。

# arg

附加参数,执行时会作为参数传递给func

# 示例
function delayAlert(arg1) {
  alert('alert' + arg1);
}

// 使用函数引用或匿名函数
setTimeout(delayAlert, 1000, 'hello');

// 执行字符串(不建议)
setTimeout('alert("hello")');
1
2
3
4
5
6
7
8
9

# 计时器setInterval

使用方式同setTimeout,只是setTimeout是执行一次而setInterval是计时循环执行

let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)
1

# clearTimeout和clearInterval

使用setTimeout和setInterval都会返回一个标识,使用对应的clearTimeout和clearInterval可以提前取消计划调度

let timeOutId = setTimeout(...);
// 使用clearTimeout取消定时调度
clearTimeout(timeOutId);

let intervalId = setInterval(...);
// 使用clearInterval取消计时调度
clearInterval(timeOutId);

1
2
3
4
5
6
7
8

# 循环setTimeout替换setInterval

周期性循环调度可以使用setInterval也可以使用嵌套setTimeout的方式,如下:

function intervalT() {
  // dosomething
}
// 使用setInterval
setInterval(intervalT, 500);

// 使用setTimeout
setTimeout(() => {
  intervalT();
  setTimeout(intervalT, 500);
}, 500);
1
2
3
4
5
6
7
8
9
10
11

使用setTimeout比setInterval更加灵活,我们可以通过上一次运行反馈进行下一步操作调整

setTimeout(() => {
  let res = intervalT();
  // res.....
  let interval = 500;
  if(res.temp) {
    // interval = ....
  }
  setTimeout(intervalT, interval);
}, 500);
1
2
3
4
5
6
7
8
9
上次更新: 2025/09/05, 8:09:00
js获取元素属性精度问题
数组判断

← js获取元素属性精度问题 数组判断→

最近更新
01
Find the next perfect square
09-05
02
Regex validate PIN code
09-05
03
Find the odd int
09-05
更多文章>
Theme by Vdoing | Copyright © 2020-2025 kros king
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
icon-heart-o icon-heart icon-infinity icon-pause icon-play link next prev