前端进阶|第四天从setTimeout、Promise看js 的异步机制

简介: 前端进阶第四天 从setTimeout、Promise看js 的异步机制 每天一个前端知识点

要理解这几个函数的执行顺序,需要先明确js的执行机制。
Javascript是单线程语言,事件的调度机制是事件循环(event loop)

console.log(1); 
setTimeout(function () {
    console.log(2)
}, 0);
 console.log(3); 

执行结果是1,3,2
注意 setTimeout的事件间隔为0,应该立即执行的,但还是在3之后,为什么会这样呢?
这是因为他们处于不同的队列中。我们知道js请求是分为同步和异步两类,其中异步任务的调度又分为两类,分别是宏任务和微任务。

macro-task(宏任务): setTimeout,setImmediate,MessageChannel
micro-task(微任务): 原生Promise(有些实现的promise将then方法放到了宏任务中),MutationObserver

setTimeout(function(){
     console.log('定时器开始')
 });
 
 new Promise(function(resolve){
     console.log('马上执行for循环');
     for(var i = 0; i < 10000; i++){
         i == 99 && resolve();
     }
 }).then(function(){
     console.log('执行then函数')
 });
 
 console.log('代码执行结束');

执行结果
js0905.html:16 马上执行for循环
js0905.html:24 代码执行结束
js0905.html:21 执行then函数
js0905.html:12 定时器开始

js的执行调度机制,没有太看懂,决定分两天。

相关文章
|
5天前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
21 7
|
6天前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
27 0
|
1天前
|
JavaScript 前端开发
JavaScript进阶-模板字符串与增强的对象字面量
【6月更文挑战第19天】ES6的模板字符串和增强对象字面量提高了JavaScript的易读性和效率。模板字符串(` `)支持变量嵌入和多行,简化了字符串处理;增强对象字面量允许简写属性与方法,以及动态属性名。注意模板字符串的闭合和性能影响,以及对象字面量的简写语法和计算属性名的恰当使用。通过实例展示了这两项特性的应用,助力编写更优雅的代码。
|
1天前
|
JavaScript 前端开发 开发者
JavaScript进阶-解构赋值与展开运算符
【6月更文挑战第19天】ES6的解构赋值与展开运算符增强了JS开发效率。解构允许直接从数组或对象提取值,简化数据提取,而展开运算符则用于合并数组和对象或作为函数参数。解构时注意设置默认值以处理不存在的属性,避免过度嵌套。展开运算符需区分数组与对象使用,勿混淆于剩余参数。通过示例展示了这两种操作在数组和对象中的应用,提升代码可读性与简洁度。
|
1天前
|
JavaScript 前端开发
JavaScript进阶-ES6新特性概览:let, const, arrow functions
【6月更文挑战第19天】ES6的`let`和`const`带来了变量声明的变革,解决了`var`的提升和作用域问题。`let`有块级作用域,避免了循环中的变量共享;`const`声明常量,值不可变但内容可变(如数组和对象)。箭头函数简化了函数定义,其`this`绑定遵循上下文,不具自己的`arguments`。这些特性提升了代码质量和可读性。
|
2天前
|
JavaScript 前端开发
JavaScript进阶-原型链与继承
【6月更文挑战第18天】JavaScript的原型链和继承是其面向对象编程的核心。每个对象都有一个指向原型的对象链,当查找属性时会沿着此链搜索。原型链可能导致污染、效率下降及构造函数与原型混淆的问题,应谨慎扩展原生原型、保持原型结构简洁并使用`Object.create`或ES6的`class`。继承方式包括原型链、构造函数、组合继承和ES6的Class继承,需避免循环引用、方法覆盖和不当的构造函数使用。通过代码示例展示了这两种继承形式,理解并有效利用这些机制能提升代码质量。
|
2天前
|
JavaScript 前端开发 测试技术
JavaScript进阶-高阶函数与柯里化
【6月更文挑战第18天】在JavaScript中,高阶函数和柯里化是函数式编程的核心。高阶函数接收或返回函数,常用于数组操作和事件处理。柯里化将多参数函数转化为单参数的逐次求值过程,用于参数预绑定和函数组合。两者能简化逻辑、提高复用性,但也需注意易错点,如混淆参数、过度柯里化,应适度使用并配合测试保证正确性。通过实践和使用工具,如lodash的`_.curry`,能更好地利用这些技术。
|
2天前
|
设计模式 自然语言处理 JavaScript
JavaScript进阶-函数表达式与闭包
【6月更文挑战第18天】JavaScript函数不仅是代码块,还是值,具备函数表达式和闭包等特性。函数表达式如匿名函数,可赋值、传参,但不提升,过度使用影响可读性。闭包允许访问外部作用域,即使父函数已结束,但不当使用可能导致内存泄漏。理解并妥善处理这些问题,如命名函数表达式、及时释放引用,能提升代码质量。通过实践深化对这些关键概念的理解至关重要。
|
3天前
|
JavaScript 前端开发 开发者
【JavaScript】JavaScript中call、apply与bind的区别:进阶特性与应用场景
【JavaScript】JavaScript中call、apply与bind的区别:进阶特性与应用场景
9 0
|
3天前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
13 3
高级前端开发需要知道的 25 个 JavaScript 单行代码

热门文章

最新文章