搜尋
首頁web前端js教程javascript非同步程式設計方法有哪些

javascript非同步程式設計方法有哪些

Apr 19, 2019 pm 01:07 PM
javascript非同步程式設計

JavaScript實現非同步程式設計的方法有:易於理解和實作但是程式碼不好維護的回呼方法,發布/訂閱方法,易於理解並且可綁定多個事件但是工作流程混亂的事件監聽方法,Promises方法

非同步模式是非常重要,在瀏覽器端長時間運行的操作應該非同步執行,以避免不回應。接下來將在文章中為大家詳細介紹JavaScript中非同步程式設計方法的實現,具有一定參考作用,希望對大家有幫助。

javascript非同步程式設計方法有哪些

【推薦課程:#JavaScript教學##】

大家都知道JavaScript的執行環境是單執行緒的,單執行緒就代表在任何時候都只能執行一個任務。如果遇到多任務的時候就需要在佇列中等待上一任務的完成。因此耗費時間比較多,同步模式就類似這種單執行緒模式,非同步模式是完全不同的,每個任務都有一個回呼函數,當一個任務完成後,它將執行回調函數,後面的任務可以與前一個任務同時運行。任務的執行順序與佇列中的任務序列不同。

方法一:回呼方法

這個方法是非同步程式設計的基本方法,假設有兩個函數f1和f2,後者會等待第一個函數的結果。

F1(); 
F2();

如果f1是長時間運行的操作,則可以重寫f1並將f2作為f1的回呼函數。

function f1(callback){
setTimeout(function () {
 callback();
    }, 1000);
}

使用此模式,同步操作就可以轉換為非同步操作,f1不會阻止程式執行,它會將先執行主邏輯然後再執行耗時的操作

#回呼函數的優點是易於理解和實現,缺點是程式碼不可讀和可維護,不同的元件高度耦合,工作流程非常混亂,每個任務只能有一個回調函數。

方法二:發布/訂閱

此事件可以理解為訊號,假設存在訊號中心,如果一個任務完成,它將向訊號中心發布訊號,其他任務可以從訂閱訊號中心接收指定訊號。這種方法就稱為發布/訂閱模式或是觀察者模式。

範例:f2向訊號中心訂閱完成訊號

jQuery.subscribe(“done”,f2);

然後寫f1為

function f1(){
    setTimeout(function () {
     jQuery.publish("done");
    }, 1000);
}

jQuery.publish(「done」)表示當f1完成執行時它將向訊號中心發送完成訊號,然後f2將開始執行。

當f2完成執行時,它可以取消訂閱。

jQuery.unsubscribe(“done”,f2);

方法三:事件監聽

另一種方法是事件驅動模式,一個任務的執行不依賴程式碼順序,它們等待一個事件發生。在本例中仍然使用f1和f2,首先將一個事件綁定到f1。

f1.on('done',f2);

上述程式碼的意思是如果f1完成事件發生,則執行f2。

function f1(){
    setTimeout(function () {
      f1.trigger('done');
    }, 1000);
}

f1.trigger('done')表示它將觸發done事件,然後在執行完成時執行f2。

優點是它易於理解並且可以綁定多個事件,每個事件都可以具有許多回調函數,並且它可以解耦哪個有利於模組化。缺點是整個程式將被事件驅動,工作流程不是很清楚。

方法四:Promises方法

Promises物件是CommonJS提出的標準,目的是為非同步程式設計提供通用介面。每個非同步任務都會傳回一個Promises對象,這個物件有一個允許設定回呼函數的then方法。例如,f1的回呼函數f2:

F1().then(F2)

f1應寫成:

function f1(){
    var dfd = $.Deferred();
    setTimeout(function () {
        dfd.resolve();
    }, 500);
    return dfd.promise;
}

#優點是回呼函數是連結的,程式的工作流程非常清晰,它有一套完整的連結方法,可用於實現強大的功能。

例如,設定多個回呼函數:

f1().then(f2).then(f3);

還有一個例子,如果有錯誤:

f1().then(f2).fail(f3);

其他三種方法不具備的一個優點是一旦完成一個任務,如果添加更多的回調函數,它們將立即執行。缺點是它不容易理解。

總結:以上就是這篇文章的全部內容了,希望對大家有幫助。

以上是javascript非同步程式設計方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
JavaScript的演變:當前的趨勢和未來前景JavaScript的演變:當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript:它的作用以及為什麼重要神秘的JavaScript:它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

Python還是JavaScript更好?Python還是JavaScript更好?Apr 06, 2025 am 12:14 AM

Python更适合数据科学和机器学习,JavaScript更适合前端和全栈开发。1.Python以简洁语法和丰富库生态著称,适用于数据分析和Web开发。2.JavaScript是前端开发核心,Node.js支持服务器端编程,适用于全栈开发。

如何安裝JavaScript?如何安裝JavaScript?Apr 05, 2025 am 12:16 AM

JavaScript不需要安裝,因為它已內置於現代瀏覽器中。你只需文本編輯器和瀏覽器即可開始使用。 1)在瀏覽器環境中,通過標籤嵌入HTML文件中運行。 2)在Node.js環境中,下載並安裝Node.js後,通過命令行運行JavaScript文件。

在Quartz中如何在任務開始前發送通知?在Quartz中如何在任務開始前發送通知?Apr 04, 2025 pm 09:24 PM

如何在Quartz中提前發送任務通知在使用Quartz定時器進行任務調度時,任務的執行時間是由cron表達式設定的。現�...

在JavaScript中,如何在構造函數中獲取原型鏈上函數的參數?在JavaScript中,如何在構造函數中獲取原型鏈上函數的參數?Apr 04, 2025 pm 09:21 PM

在JavaScript中如何獲取原型鏈上函數的參數在JavaScript編程中,理解和操作原型鏈上的函數參數是常見且重要的任�...

微信小程序webview中Vue.js動態style位移失效是什麼原因?微信小程序webview中Vue.js動態style位移失效是什麼原因?Apr 04, 2025 pm 09:18 PM

在微信小程序web-view中使用Vue.js動態style位移失效的原因分析在使用Vue.js...

在Tampermonkey中如何實現對多個鏈接的並發GET請求並依次判斷返回結果?在Tampermonkey中如何實現對多個鏈接的並發GET請求並依次判斷返回結果?Apr 04, 2025 pm 09:15 PM

在Tampermonkey中如何對多個鏈接進行並發GET請求並依次判斷返回結果?在Tampermonkey腳本中,我們經常需要對多個鏈...

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。