新技能GET！在前端表格中花式使用非同步函式的奧義

葡萄城技術團隊發表於2021-11-17

背景

60年代時，作業系統中獨立執行的單元通常是程式。但隨著計算機技術的發展，人們發現在程式執行過程中，建立、撤銷與切換都要花費較大的時空開銷。

到了80年代為了解決這一問題，出現了更小的獨立執行基本單位——執行緒。

作業系統把 CPU 處理時間劃分成許多更小的時間片，在每一個獨立時間片執行一個執行緒的指令，到下一個時間片繼續執行下一執行緒的指令，各執行緒輪流執行，由於每一個時間片時間都比較短，所有執行緒都會執行，對於使用者而言就好像所有執行緒在同時進行。最終達到的效果就是在程式設計時可以建立多個執行緒，同一時間執行，各執行緒可以"並行"執行，以完成不同的任務。

這時新的問題也出現了，在單獨執行緒的執行模式之下，一段程式碼呼叫另一段程式碼時，只能採用同步呼叫，只有當前程式碼執行完成返回結果之後，呼叫才能繼續往下執行。用一個例子就是現在只有一個水槽，一匹馬想喝水只能等上一匹馬走了才能繼續喝。

而有了多執行緒的支援，可以採用非同步函式的呼叫，這個問題就迎刃而解了。

非同步函式原理介紹

程式中會有很多內容，計算內容複雜、渲染內容繁多，在處理過程中需要花費比較多的時間。當某個模組A呼叫了模組B的處理內容時，這時模組B中的內容就需要一些時間處理，此時模組A如果不停地等待，就會嚴重影響程式效能。在實際情況中，就比如在前端頁面中需要進行線上填報的資料處理，需要對資料內容進行計算後放入表格中展示，這是由於計算並未完成，頁面內容也不顯示，給使用者帶來的感覺就是內容都點選執行了，但是頁面遲遲沒有任何反饋。

出現了非同步函式的呼叫之後，此時執行的模組A和模組B分別屬於不同的執行緒。

在非同步呼叫中，模組A不需要等到模組B返回內容，就可以繼續執行後續程式碼。

模組B中的內容執行完畢後，會通知模組A：我這邊處理完畢，你記得處理後續內容。

藉助非同步呼叫，可以把剛剛我們提到的前端頁面中顯示問題進行優化：把整個初始化處理放進一個單獨執行緒，主執行緒啟動此執行緒後接著往下走，讓主視窗瞬間顯示出來。等思索需要進行的操作的內容時，資料計算處理就已經在暗中處理完畢；程式開始穩定執行以後，非同步呼叫還可以進一步優化人機互動的過程。使用者點選滑鼠時進行操作的時候，操作內容比較費時，點選後系統沒有立馬作出回應，這會讓使用者的使用體驗很糟糕。將更費時、速度更慢的操作內容轉為非同步呼叫，讓主執行緒隨時恭候下一條訊息，這樣使用者的滑鼠操作動作響應速度更快，使用體驗自然大大提升。

實踐：專家使用者的花式使用

例項演示

我們用一個簡單的例子，看看在前端電子表格單元格計算中，如何使用非同步函式。

var ServerDecode = function () {};
ServerDecode.prototype = new GC.Spread.CalcEngine.Functions.AsyncFunction("DECODE", 1, 255);
ServerDecode.prototype.evaluateAsync = function (context, arg1) {
    $.get("decode/" + arg1, function (data, status) {
        context.setAsyncResult(data);
    });
};

spread.addCustomFunction(new ServerDecode());

sheet.setFormula(0, 1, '=DECODE(A1)');

在這個演算法中我們將設定的計算解析方法部分放在伺服器上，方法名稱叫DECODE