【面试题】JS基础-异步

周兴

于 2022-11-25 11:17:17 发布

阅读量376

点赞数

分类专栏：面试题文章标签： javascript 前端

本文链接：https://blog.csdn.net/zx1041561837/article/details/128032504

版权

面试题专栏收录该内容

47 篇文章 1 订阅

订阅专栏

1. 异步

1.1 为什么要异步？

JS是单线程语言，只能同时做一件事。JS和DOM渲染共用同一个线程，因为JS可修改DOM结构。当遇到等待的情况时，例如网络请求、定时任务，程序不能卡住。所以需要异步来解决JS单线程等待的问题，异步通过回调callback函数的形式实现。

1.2 异步和同步

同步和异步的区别：异步不会阻塞代码执行，同步会阻塞代码执行。

异步

// 异步（callback回调函数）
console.log(100)
setTimeout(()=>{
    console.log(200)
}, 1000)
console.log(300)

在这里插入图片描述

同步

console.log(100)
alert(200)
console.log(300)

不点击弹框的确认按钮，就不会执行console.log(300)

2. 异步的应用场景

网络请求，如ajax图片加载

// ajax
console.log('start')
$.get('./data1.json', function(data1){
	console.log(data1)
})
console.log('end')

// 图片加载
console.log('start')
let img = document.createElement('img')
img.onload = function(){
	console.log('loaded')
}
img.src = '/xxx.png'
console.log('end')

定时任务，如setTimeout

// setTimeout
console.log(100)
setTimeout(function(){
	console.log(200)
}, 1000)
console.log(300)

// setInterval
console.log(100)
setInterval(function(){
	console.log(200)
}, 1000)
console.log(300)

3. promise的基本使用

3.1 promise可以解决callback hell的问题

在这里插入图片描述

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'

// Promise的基本用法，管道串联的形式
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))

3.2 手写Promise加载图片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手写Promise加载图片</title>
</head>

<body>
    <script>
        function loadImg(src) {
            const p = new Promise(
                (resolve, reject) => {
                    const img = document.createElement('img')
                    img.onload = () => {
                        resolve(img)
                    }
                    img.onerror = () => {
                        reject(new Error(`图片加载失败 ${src}`))
                    }
                    img.src = src
                }
            )
            return p;
        }

        const url1 = 'https://profile-avatar.csdnimg.cn/fb030a9b9de24f4ba6dd8cd6c094ffcf_zx1041561837.jpg!1'
        const url2 = 'https://img-home.csdnimg.cn/images/20201124032511.png'

        loadImg(url1).then(img1 => {
            console.log('图片1的宽度为：' + img1.width)
            return img1    // 普通对象
        }).then(img1 => {
            console.log('图片1的高度为：' + img1.height)
            return loadImg(url2)    // promise对象
        }).then(img2 =>{
            console.log('图片2的宽度为：' + img2.width)
            return img2
        }).then(img2 => {
            console.log('图片2的高度为：' + img2.height)
        }).catch(ex => console.error(ex))
    </script>
</body>
</html>

在这里插入图片描述

4. JS异步相关面试题

console.log(1)
setTimeout(function(){
    console.log(2)
}, 1000)
console.log(3)
setTimeout(function(){
    console.log(4)
}, 0)
console.log(5)

在这里插入图片描述

周兴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【面试题】JS基础-异步

本文介绍JS中的异步问题，并且介绍了Promise的基本使用方法。
复制链接

扫一扫

专栏目录