亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

異步！異步！異步！

chanthuang / 936人閱讀

摘要：同步和異步先說個傻子的故事有個傻子，第一次用某雷下載大片，就是大人看的片，咳咳咳。。。

1.同步和異步 1.1先說個傻子的故事 
有個傻子，第一次用某雷下載大片，就是大人看的片，咳咳咳。。。
某雷告訴他，下載時間要倆小時，傻子心想，要倆小時吶，我第一次用某雷，我得盯著它下載，啥也不能干
于是傻子就干瞪著電腦，等著片下完，這倆小時，傻子啥也沒干
后來，傻子變聰明了，他想，反正某雷在幫他下載，這倆小時，他完全可以干干其他事情啊，比如學學計算機知識呀等等
等某雷下完了，再回來看唄
于是傻子潛心研究計算機知識，直到有一天他看到了有關(guān)于異步的知識，突然間明白了

原來他等待某雷下完，啥也不干的過程就叫做同步
后來他在某雷下載過程中自學計算機知識的過程就叫做異步

1.2 同步與異步的概念

同步
英文：Synchronization
wiki解釋：指在一個系統(tǒng)中所發(fā)生的事件（event），之間進行協(xié)調(diào)，在時間上出現(xiàn)一致性與統(tǒng)一化的現(xiàn)象。
是不是很難理解？
其實就是代碼要等待到結(jié)果，才能繼續(xù)進行【你可以理解為同步阻塞了代碼繼續(xù)執(zhí)行】

異步
英文：Asynchronization【在同步前面加了個A】
wiki解釋就不貼了，有興趣的朋友可以自己搜索看一下，反正我看的也挺頭疼
其實就是代碼不用等待到結(jié)果，就能繼續(xù)進行【你可以理解為異步不阻塞代碼繼續(xù)執(zhí)行】
啥意思咧，讓我們看個大家都見過的例子

function wait() {
    setTimeout(() => console.log(this), 3000)
}

wait() // 三秒鐘后，得到結(jié)果
console.log(1) // 如果沒有異步的話，我得等三秒鐘才能執(zhí)行，所以，感謝異步
2.常見的異步問題 2.1圖片加載問題 
// 前提條件：用戶的瀏覽器第一次請求這個圖片，也就是用戶的瀏覽器未緩存
document.getElementsByTagNames("img")[0].width // 寬度為 0

為什么width會為0呢？
因為js運行的時候，img并沒有下載完畢

解決方案

let imgNode = document.getElementsByTagName("img")[0]
imgNode.addEventListener("onload",function () {
    console.log(this.width)
})
2.2 面試題?？嫉漠惒絾栴} 
// 假設(shè)有5個li
let liList = document.querySelectorAll("li")
for (var i = 0; i < liList.length; i++) {
    liList[i].onclick = function () {
        console.log(i) // 5 5 5 5 5
    }
}

為什么呢？
因為onclick事件是異步處理的，用戶觸發(fā)onclick事件時，循環(huán)早已結(jié)束，此時的i是5

解決方案一【立即執(zhí)行函數(shù)創(chuàng)建獨立作用域】

// 假設(shè)有5個li
let liList = document.querySelectorAll("li")
for (var i = 0; i < liList.length; i++) {
    !(function (j) {
        liList[j].onclick = function () {
            console.log(j) // 5 5 5 5 5
        }
    })(i)
}

解決方案二【使用let】

// 假設(shè)有5個li
let liList = document.querySelectorAll("li")
for (let i = 0; i < liList.length; i++) {
    liList[i].onclick = function () {
        console.log(i) // 5 5 5 5 5
    }
}
3.拿到異步結(jié)果的方式 —— 回調(diào)

請見回調(diào)是個什么鬼？

4.Promise

請見淺析Promise

5.async / await 語句 5.1 粗略了解await

mdn解釋：await 操作符用于等待一個Promise 對象。它只能在異步函數(shù) async function 中使用

但是await究竟做了什么事情呢？
let setPromise = function () {
    return new Promise((resolve, reject) => {
        // 你的異步代碼
        setTimeout(() => {
            resolve("success")
        }, 10000)
    })
}
let result = await setPromise()

如果你這個時候在控制臺不斷輸入result。
控制臺會不斷地報錯
控制臺報錯：result is not defined
直到10s后，才能成功

為啥報錯呢？命名let result了呀
因為await在等待setPromise()完成后，才會執(zhí)行let result =
也就是說await 讓前面的 let 和 = 異步了

可能你會問：
這樣一搞，result也異步了，那我豈不是還要回調(diào)？

那么再來看下一個問題
let setPromise = function () {
    return new Promise((resolve, reject) => {
        // 你的異步代碼
        setTimeout(() => {
            resolve("success")
        }, 10000)
    })
}
let result = await setPromise()
console.log(1) // 請問這句代碼是在10秒后被執(zhí)行，還是立即執(zhí)行？

答案:10s后執(zhí)行

5.2 所以await究竟能干嘛

await改變了整個代碼的執(zhí)行順序.
它可以讓你用同步寫代碼的方式去寫異步代碼

5.3 那么async又是干啥的呢？

如果你在一個函數(shù)內(nèi)使用了await，那么你最好在一個函數(shù)的前面加上async

let setPromise = function () {
    return new Promise((resolve, reject) => {
        // 你的異步代碼
        setTimeout(() => {
            resolve("success")
        }, 2000)
    })
}
function test() {
    return result = await setPromise()
}
console.log(3)

控制臺直接會報錯：Uncaught SyntaxError: await is only valid in async function
啥意思咧 —— await只允許在 async function 內(nèi)使用
也就是說，要在函數(shù)聲明的時候就加上 async

async function test() {
    let result = await setPromise()
}
5.4 Promise異步操作失敗的情況 
let setPromise = function () {
    return new Promise((resolve, reject) => {
        // 你的異步代碼
        setTimeout(() => {
            reject.call(undefined)
        }, 2000)
    })
}
let result = await setPromise()
console.log(result)
// 瀏覽器又報錯了 Uncaught (in promise) undefined

因為沒有then/catch來處理Promise異步操作失敗的結(jié)果
所以我們這次使用try...catch...語句

let setPromise = function () {
    return new Promise((resolve, reject) => {
        // 你的異步代碼
        setTimeout(() => {
            reject.call(undefined)
        }, 2000)
    })
}
try {
    let result = await setPromise()
    console.log(result)
} catch(rejected) {
    // 觸發(fā)這一句
    console.log("error")
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/52085.html

相關(guān)文章

  • JavaScript 異步時序問題

    摘要：異步時序問題吾輩的博客原文場景死后我們必升天堂，因為活時我們已在地獄。關(guān)鍵點異步操作得到結(jié)果的時間順序是不確定的如果觸發(fā)事件的頻率較高異步操作的時間過長出現(xiàn)這種問題怎么解決既然關(guān)鍵點由兩個要素組成，那么，只要破壞了任意一個即可。 JavaScript 異步時序問題 吾輩的博客原文：https://blog.rxliuli.com/p/de... 場景 死后我們必升天堂，因為活時我們已...

    tuantuan 評論0 收藏0

  • 同步與異步、異步與回調(diào)

    摘要：同步與異步以上為同步代碼，函數(shù)必須等函數(shù)執(zhí)行完畢后才能執(zhí)行。異步回調(diào)產(chǎn)生的結(jié)果就是，函數(shù)的調(diào)用并不直接返回結(jié)果，而往往是交給回調(diào)函數(shù)進行異步處理。 同步與異步： function a(){} function b(){} a(); b(); 以上為同步代碼，函數(shù)b必須等函數(shù)a執(zhí)行完畢后才能執(zhí)行。 function a(){ ...

    dinfer 評論0 收藏0

  • 異步！異步！異步！

    摘要：同步和異步先說個傻子的故事有個傻子，第一次用某雷下載大片，就是大人看的片，咳咳咳。。。 1.同步和異步 1.1先說個傻子的故事 有個傻子，第一次用某雷下載大片，就是大人看的片，咳咳咳。。。 某雷告訴他，下載時間要倆小時，傻子心想，要倆小時吶，我第一次用某雷，我得盯著它下載，啥也不能干 于是傻子就干瞪著電腦，等著片下完，這倆小時，傻子啥也沒干 后來，傻子變聰明了，他想，反正某雷在幫他下...

    ThinkSNS 評論0 收藏0

  • (轉(zhuǎn))JavaScript：同步、異步和事件循環(huán)

    摘要：事件循環(huán)事件循環(huán)是指主線程重復從消息隊列中取消息執(zhí)行的過程。事件觸發(fā)時，表示異步任務(wù)完成，會將事件監(jiān)聽器函數(shù)封裝成一條消息放到消息隊列中，等待主線程執(zhí)行。 一. 單線程 我們常說JavaScript是單線程的。 所謂單線程，是指在JS引擎中負責解釋和執(zhí)行JavaScript代碼的線程只有一個。不妨叫它主線程。 但是實際上還存在其他的線程。例如：處理AJAX請求的線程、處理DOM事件的線...

    android_c 評論0 收藏0

  • JavaScript：徹底理解同步、異步和事件循環(huán)(Event Loop)

    摘要：例如處理請求的線程處理事件的線程定時器線程讀寫文件的線程例如在中等等。事件循環(huán)事件循環(huán)是指主線程重復從消息隊列中取消息執(zhí)行的過程。事件觸發(fā)時，表示異步任務(wù)完成，會將事件監(jiān)聽器函數(shù)封裝成一條消息放到消息隊列中，等待主線程執(zhí)行。 一. 單線程 我們常說JavaScript是單線程的。 所謂單線程，是指在JS引擎中負責解釋和執(zhí)行JavaScript代碼的線程只有一個。不妨叫它主線程。 但是實...

    wenyiweb 評論0 收藏0

發(fā)表評論

0條評論

chanthuang

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<