浅谈Promise与Settimeout

文章介绍了JavaScript的异步执行机制,包括同步任务、异步任务、微任务和宏任务的执行顺序。重点讲解了事件循环(EventLoop)的工作原理,以及Promise和setTimeout在异步操作中的角色。Promise用于更优雅地处理异步操作,而setTimeout则是定时执行代码的工具。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

异步任务包含微任务和宏任务

微任务优先级高于宏任务
Promise的回调函数属于微任务
setTimeout属于宏任务
一般是先执行同步任务,没有同步任务的时候才会去依次执行微任务和宏任务

eventloop

详细步骤如下:
  1、所有同步任务都在主线程上执行,形成一个执行栈
  2、主线程之外,还存在一个"消息队列"。只要异步操作执行完成,就到消息队列中排队
  3、一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取消息队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行
  4、主线程不断重复上面的第三步
【循环】
  从代码执行顺序的角度来看,程序最开始是按代码顺序执行代码的,遇到同步任务,立刻执行;遇到异步任务,则只是调用异步函数发起异步请求。此时,异步任务开始执行异步操作,执行完成后到消息队列中排队。程序按照代码顺序执行完毕后,查询消息队列中是否有等待的消息。如果有,则按照次序从消息队列中把消息放到执行栈中执行。执行完毕后,再从消息队列中获取消息,再执行,不断重复。
  由于主线程不断的重复获得消息、执行消息、再取消息、再执行。所以,这种机制被称为事件循环
  
Promise和setTimeout都是JS中用来处理异步操作的方法。其中,Promise可以更好地处理异步操作的结果,通过then及catch方法进行处理;而setTimeout则是一个定时器,可以在指定的时间后执行一段代码。需要注意的是,Promise的使用需要熟练掌握回调函数、链式调用等概念,而setTimeout则是一个相对简单的单纯的定时器。

Promise

Promise 构造函数是 JavaScript 中用于创建 Promise 对象的内置构造函数。
Promise 构造函数接受一个函数作为参数,该函数是同步的并且会被立即执行,所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject,分别表示 Promise 成功和失败的状态。
起始函数执行成功时,它应该调用 resolve 函数并传递成功的结果。当起始函数执行失败时,它应该调用 reject 函数并传递失败的原因。
Promise 构造函数返回一个 Promise 对象,该对象具有以下几个方法:
then:用于处理 Promise 成功状态的回调函数。
catch:用于处理 Promise 失败状态的回调函数。
finally:无论 Promise 是成功还是失败,都会执行的回调函数。

参考

promise使用场景参考

Settimeout

setTimeout 是 JavaScript 中的一个定时器函数,用于在指定的时间之后执行一次回调函数,它不能解决回调地狱问题,而是用于延迟执行代码。

好的,以下是一个使用 `Date()` 对象和 `setTimeout()` 和 `clearTimeout()` 函数实现的 JavaScript 计时器代码: ```javascript // 获取要显示时间的元素 const timerDisplay = document.querySelector('#timer'); // 初始时间为 0,以及用于存储开始时间的变量和计时器的变量 let startTime = null; let time = 0; let timer = null; // 更新时间并显示 function updateTime() { if (startTime) { // 计算经过的时间 time = Math.floor((new Date() - startTime) / 1000); } else { // 如果没有开始时间,就设置开始时间为当前时间 startTime = new Date(); } timerDisplay.textContent = time; // 每秒更新时间 timer = setTimeout(updateTime, 1000); } // 启动计时器 updateTime(); // 模拟暂停和继续计时器 document.querySelector('#pause').addEventListener('click', () => { // 清除计时器 clearTimeout(timer); // 重置开始时间 startTime = null; }); document.querySelector('#resume').addEventListener('click', () => { // 启动计时器 updateTime(); }); ``` 以上代码中,我们使用 `Date()` 对象来获取当前时间和开始时间,并计算出经过了多少秒。我们使用 `setTimeout()` 函数来每秒更新时间并显示。当暂停计时器时,我们使用 `clearTimeout()` 函数来清除计时器,重置开始时间来模拟暂停;当继续计时器时,我们重新启动计时器来模拟继续。 你同样需要将 `#timer` 替换成你页面中实际显示时间的元素的选择器,以及 `#pause` 和 `#resume` 替换成你页面中实际用于暂停和继续计时器的按钮的选择器。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值