(前端面试题)详解 JS 的 setTimeout 和 setInterval 两大定时器

简介: (前端面试题)详解 JS 的 setTimeout 和 setInterval 两大定时器

程序员面试题库分享

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

2、前端技术导航大全      推荐:★★★★★

地址:前端技术导航大全

3、开发者颜色值转换工具   推荐:★★★★★

地址 :开发者颜色值转换工具

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第8天,点击查看活动详情

概述

下文主要介绍 JS 中 setTimeout 和 setInterval 两大定时器的区别和执行细节,如解析上有错误,欢迎各位在评论区指出 ( ̄▽ ̄)~*

结论

  1. setTimeout期望推迟(delay)ms后执行函数, setInterval 则是期望间隔(delay)ms就执行一次函数
  • 注意,这里两个函数都是期望推迟或期望间隔,不能保证准确推迟或准确间隔
  • 说人话:
  • setTimeout(func, 1000)期望推迟 1000ms 后执行 func 函数,但有实际结果可能要比 1000ms 要长
  • setInterval(func, 1000),期望间隔 1000ms 后执行 func 函数,但有实际结果可能要比 1000ms 要长
  1. 对于 周期性调度 的需求(即:重复的定时器),使用“嵌套的 setTimeout ”要比使用 setInterval

What?

对于第二个结论,周期性调度有两种方式

一种是使用 setInterval,另外一种就是嵌套的 setTimeout,就像这样:

// 使用 setInterval ↓↓↓↓↓↓
let intervalTimerId = setInterval(() => {
  console.log('tick')
}, 2000);
// 使用嵌套的 setTimeout ↓↓↓↓↓↓
function tick() {
  console.log('tick');
  timerId = setTimeout(tick, 2000);
}
let timeoutTimerId = setTimeout(tick, 2000);

Why?

对于第一个结论

之所以说 setTimeout(func, 1000),是期望推迟 1000ms 后执行 func 函数,是因为 js 是运行在单线程的环境中,也就是说,js 在一瞬间只能处理一件事情。推迟 1000ms 后执行 func 函数,但在达到 1000ms 的那个瞬间,有可能在处理其它事情,所有就不能按期望,在达到 1000ms 的那个瞬间执行 func 函数。

说人话:比如你约好了朋友晚上 7 点一起下班去吃饭,结果 6 点 59 分,突然有一个紧急 bug 需要处理,你就没办法准时赴约

专业一点的说法: JavaScript 有一个基于“Event Loop”并发的模型(不是并行)。前者是逻辑上的同时发生,而后者是物理上的同时发生。所以,单核处理器也能实现并发,如下图:

之前一直想为什么 js 要设计成单线程运行,现在找到一种说法感觉还挺合理: JavaScript的主要用途是与用户互动,以及操作DOM。若以多线程的方式,则可能出现冲突。假设有两个线程同时操作一个DOM元素,线程1要求浏览器删除DOM,而线程2却要求修改DOM样式,这时浏览器就无法决定采用哪个线程的操作。当然,我们可以为浏览器引入“锁”的机制来解决这些冲突,但大大提高复杂性,所以 JavaScript从诞生开始就选择了单线程执行。在某一时刻内只能执行特定的一个任务,并且会阻塞其它任务执行。

栗子:

function test() {
  for (var i = 0; i < 500000; i++) {
    var div = document.createElement('div');
    div.setAttribute('id', 'testDiv');
    document.body.appendChild(div);
    document.body.removeChild(div);
  }
}
setInterval(test, 10);
var start = new Date();
console.log('start:', start.getMinutes() + ':' + start.getSeconds() + ':' + start.getMilliseconds())
var timer = setTimeout(function() {
  var end = new Date();
  console.log('end:', end.getMinutes() + ':' + end.getSeconds() + ':' + end.getMilliseconds())
}, 1000);

打印出来的是:

start: 15:54:611
end: 15:57:73

正常来说 end 打印出来的应该是 15:55:611 才对

偏差接近 3s

》》》》》》》》》》》》》》》》》》

对于第二个结论

let i = 1;
setInterval(function() {
  func(i++);
}, 100);

以上代码,我们原本的想法是,每隔 100ms 执行一次 func 函数,但实际上 func(1) 和 func(2) 之间的间隔不是 100ms,因为 func 函数的执行本来就是需要消耗时间的

使用 setInterval 时,func 函数的实际调用间隔要比代码中设定的时间间隔要短!(上图所示)

极端情况下,如果函数每次执行时间都超过 delay 设置的时间,那么每次调用之间将完全没有停顿,而时间间隔已经不取决于delay 设置的时间,而是 func 的执行时间。例如以下代码:↓↓↓↓↓↓

ps:以下代码有毒,要跑很久,可能会卡死浏览器

setInterval(() => {
  var time = new Date();
  console.log('time:', time.getMinutes() + ':' + time.getSeconds() + ':' + time.getMilliseconds())
  function test() {
    for (var i = 0; i < 50000000; i++) {
      var div = document.createElement('div');
      div.setAttribute('id', 'testDiv'+i);
      document.body.appendChild(div);
      document.body.removeChild(div);
    }
  }
  test();
}, 1000);

打印出来的是:

隔了差不多 3 分钟!

正常来说,应该是每个差不多 100ms 打印一次,但因为中间加了一个超级耗时的任务,所以时间间隔拉得很长

如果期望func 隔 100ms 执行一次的话(再强调一遍,是期望,不是绝对,详细见结论 1),最好是使用嵌套的 setTimeout

let i = 1;
setTimeout(function run() {
  func(i++);
  setTimeout(run, 100);
}, 100);

  程序员面试题库分享

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

2、前端技术导航大全      推荐:★★★★★

地址:前端技术导航大全

3、开发者颜色值转换工具   推荐:★★★★★

地址 :开发者颜色值转换工具

相关文章
|
5天前
|
存储 前端开发 JavaScript
前端面试题23-34
通过对 Promise 和 ECMAScript6 的深入理解,可以更好地应对现代 JavaScript 开发中的复杂异步操作和新特性,提升代码质量和开发效率。
10 2
|
3天前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
17 0
|
4天前
|
JavaScript 前端开发 安全
JavaScript基础-定时器:setTimeout, setInterval
【6月更文挑战第13天】JavaScript中的`setTimeout`和`setInterval`是异步编程的关键工具,用于按计划执行代码。`setTimeout`在延迟后执行一次,而`setInterval`则周期性执行。常见问题包括忘记清除定时器导致内存泄漏,递归使用`setTimeout`可能引发无限递归,以及字符串代码执行的安全隐患。解决方法包括使用`clearTimeout`和`clearInterval`,设置递归终止条件,以及优先使用函数表达式。理解定时器的非精确性并采用错误处理策略也是实践中的重要技巧。通过示例展示了如何延迟显示消息和周期性打印计数。
|
19天前
|
前端开发 JavaScript Java
2024高频前端面试题合集(一)
JavaScript Bridge 是一种在 JavaScript 和其他语言(如 Java、Objective-C 等)间建立通信的技术,常用于混合应用开发,允许调用原生功能、获取数据、事件通知及优化性能。SSR(服务器端渲染)的单机 QPS 取决于服务器性能、应用复杂度、网络条件等因素。Egg.js 是基于 Node.js 的企业级框架,通过目录结构约定、启动流程、插件机制和核心组件来初始化应用。前端错误捕获可通过 try-catch、window.onerror、Promise.catch 和 unhandledrejection 事件等方式实现。
|
2天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
3天前
|
JavaScript 前端开发 网络协议
前端JS发起的请求能暂停吗?
在讨论前端JS发起的请求是否能暂停时,需要明确两个概念:什么状态可以被认为是“暂停”?以及什么是JS发起的请求?
57 1
前端JS发起的请求能暂停吗?
|
5天前
|
前端开发 JavaScript 虚拟化
前端面试题12-22
ES6(ECMAScript 2015)是 JavaScript 的重要版本,引入了许多新特性和语法,提升了语言的功能和可用性。ES6 的主要特性包括箭头函数、类、模板字符串、解构赋值、默认参数、Promise、模块化、Generator 函数、async 函数、Proxy 和 Reflect 等。这些特性不仅简化了代码的编写和维护,还为开发者提供了更多的编程范式和工具。了解和掌握 ES6 的特性是现代 JavaScript 开发的必备技能。
6 1
|
5天前
|
JSON 前端开发 JavaScript
前端面试题01-11
Map是ES6引入的一种新的键值对集合数据结构,类似于对象,但键的范围不限于字符串,还可以是任何类型的值。Map保持键值对的插入顺序,提供更灵活的键值对操作方法,如`set()`、`get()`、`delete()`、`has()`等。
5 1
|
6天前
|
前端开发 JavaScript 安全
TypeScript作为一种静态类型的JavaScript超集,其强大的类型系统和面向对象编程特性为微前端架构的实现提供了有力的支持
【6月更文挑战第11天】微前端架构借助TypeScript提升开发效率和代码可靠性。 TypeScript提供类型安全,防止微前端间通信出错;智能提示和自动补全加速跨代码库开发;重构支持简化代码更新。通过定义公共接口确保一致性,用TypeScript编写微前端以保证质量。集成到构建流程确保顺利构建打包。在微前端场景中,TypeScript是强有力的语言选择。
23 2
|
10天前
|
Web App开发 资源调度 JavaScript
【保姆级】前端使用node.js基础教程
【6月更文挑战第3天】Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境,用于服务器端编程。常用命令包括:安装 Node.js,通过 `node -v` 查看版本;使用 npm(Node 包管理器)进行初始化、安装/卸载包、查看版本和更新;运行 `.js` 脚本;使用 `node inspect` 调试;借助 nodemon 实现自动重启;通过 `npm list` 管理包;
5 0

热门文章

最新文章