提问

同步和异步的区别是什么
手写用Promise加载一张图片
前端使用的异步的场景有哪些

单线程

JS是单线程语言，只能同时做一件事
浏览器和NodeJs已支持JS启动进程，如Web Worker
JS和DOM渲染共用同一个线程，因为JS可修改DOM结构
遇到等待（网络请求，定时任务）不能卡住
同步会阻塞代码的执行，所以需要异步，解决单线程等待的问题，不会阻塞后面代码的执行
回调callback函数形式，setTimeout回调就是异步

// 异步 （callback 回调函数）console.log(1)setTimeout(function(){console.log(2)}, 1000)console.log(3)setTimeout(function(){console.log(4)}, 0)console.log(5)//1，3，5，4，2

// 同步，alert点击确定之后才会输出300
console.log(100)
alert(200)
console.log(300)

应用场景

网络请求，如ajax、图片加载img.onload
定时任务，如setTimeout、setInterval

callback hell和promise

callback hell是回调嵌套的形式
promise实现非嵌套的形式，管道串联的形式，解决callback hell问题，callback嵌套问题

//callback hell
//获取第一份数据
$.get(url1,(data1) => {console.log(data1)//获取第二份数据$.get(url2,(data2) => {console.log(data2)})//获取第三份数据$.get(url3,(data3) => {console.log(data3)//还可能获取更多的数据})
})
//Promise
function getData(url){return new Promise((resolve, reject) => {$.ajax({url,success(data) {resolve(data)},error(err) {reject(err)}})})
}
const url1 = '/data1.json'
const url2 = '/data2.json'
const url3 = '/data3.json'
getData(url1).then(data1 => {console.log(data1)return getData(url2)
}).then(data2 => {console.log(data2)return getData(url3)
}).then(data3 => {console.log(data3)
}).catch(err => console.error(err))

function loadImg(src) {const p = new Promise((resolve, reject) => {const img = document.createElement('img')img.onload = () => {resolve(img)}img.onerror = () => {const err = new Error(`图片加载失败 ${src}`)reject(err)}img.src = src})return p
}// const url = 'https://img.mukewang.com/5a9fc8070001a82402060220-140-140.jpg'
// loadImg(url).then(img => {//     console.log(img.width)
//     return img
// }).then(img => {//     console.log(img.height)
// }).catch(ex => console.error(ex))const url1 = 'https://img.mukewang.com/5a9fc8070001a82402060220-140-140.jpg'
const url2 = 'https://img3.mukewang.com/5a9fc8070001a82402060220-100-100.jpg'loadImg(url1).then(img1 => {console.log(img1.width)return img1 // 普通对象
}).then(img1 => {console.log(img1.height)return loadImg(url2) // promise 实例
}).then(img2 => {console.log(img2.width)return img2
}).then(img2 => {console.log(img2.height)
}).catch(ex => console.error(ex))

（七）JS基础知识四（搞定异步）【三座大山之三，必考！！！】相关推荐

计算机学业水平测试基础知识,全国通用信息技术学业水平测试必考知识要点(一)...
高中信息技术学业水平测试必考知识要点(一) 全国通用信息技术学业水平测试必考知识要点(一) 一.信息技术基础(书本第一章和第七章内容) 1.能够判断哪些是信息判断信息的方法: (1)消息 (2)载体 ...
（四）JS基础知识一（深入分析变量类型和计算）【不会变量，别说你会JS】
JS基础知识一(变量类型和计算) 提问变量类型值类型 vs 引用类型 (堆栈模型) 值类型引用类型 typeof 运算符深拷贝变量计算字符串拼接 == if语句和逻辑运算 if语句逻辑判 ...
跳槽者、应届生必看JAVA面试题系列 - JAVA基础知识(四)
一: 前言莫等闲,白了少年头,空悲切. 二: 面试挑战在文章开始前,首先安利下"面试挑战": 凡是满足下面的挑战条件的,如果一个月内没有拿到一个Offer的,免费提供简历封 ...
了解js基础知识中的作用域和闭包以及闭包的一些应用场景，浅析函数柯里化
js基础知识中的作用域和闭包一.作用域 1.作用域.自由变量简介 (1)作用域定义 (2)作用域实例演示 (3)自由变量定义 (4)自由变量实例演示 2.作用域链简介 (1)作用域链定义 (2)作用 ...
php插入js教程,JavaScript_JavaScript入门教程(2) JS基础知识，在什么地方插入 JavaScript　　Ja - phpStudy...
JavaScript入门教程(2) JS基础知识在什么地方插入 JavaScript JavaScript 可以出现在 HTML 的任意地方.使用标记,你可以在 HTML 文档的任意地方插入 Jav ...
JS基础知识学习（一）
JS基础知识前端开发常用的浏览器谷歌浏览器(chrome):Webkit内核(v8引擎) 火狐浏览器(firefox):Gecko内核欧朋浏览器(opera):Presto内核 IE浏览器:Tr ...
（六）JS基础知识三（走进作用域和闭包）【三座大山之二，不会闭包，基本不会通过】
JS基础知识三(作用域和闭包) 提问作用域自由变量闭包 this 提问 this的不同应用场景,如何取值手写bind函数实际开发中闭包的应用场景,举例说明创建10个a标签,点击的时候弹出对 ...
（五）JS基础知识二（通过图理解原型和原型链）【三座大山之一，必考！！！】
JS基础知识二(原型和原型链) 提问 class 继承类型判断(instanceof) 原型原型关系基于原型的执行规则原型链说明提问如何准确判断一个变量是不是数组 class的原型本质 ...
Js基础知识梳理系列
小序:总是感觉自己的技术一直在原地踏步,想学习一些新的技术,但学起来很吃力,而且总是没有什么实际的收获,似乎进入了所谓的"瓶颈期".问了一些前辈是否也遇到过同样的问题,他们给我的解 ...

（七）JS基础知识四（搞定异步）【三座大山之三，必考！！！】

JS基础知识四（异步）

提问

单线程

应用场景

callback hell和promise

（七）JS基础知识四（搞定异步）【三座大山之三，必考！！！】相关推荐

最新文章

热门文章