新技能GET！在前端表格中花式使用異步函數(shù)的奧義

番茄西紅柿發(fā)布于2021-11-17 17:00 / 3004人閱讀

摘要：實(shí)踐專家用戶的花式使用實(shí)踐專家用戶的花式使用實(shí)例演示實(shí)例演示我們用一個(gè)簡(jiǎn)單的例子，看看在前端電子表格單元格計(jì)算中，如何使用異步函數(shù)。這一次用戶使用異步函數(shù)從服務(wù)器獲取當(dāng)前服務(wù)名，并在顯示出來。

背景

60年代時(shí)，操作系統(tǒng)中獨(dú)立運(yùn)行的單元通常是進(jìn)程。但隨著計(jì)算機(jī)技術(shù)的發(fā)展，人們發(fā)現(xiàn)在進(jìn)程運(yùn)行過程中，創(chuàng)建、撤銷與切換都要花費(fèi)較大的時(shí)空開銷。

到了80年代為了解決這一問題，出現(xiàn)了更小的獨(dú)立運(yùn)行基本單位——線程。

操作系統(tǒng)把 CPU 處理時(shí)間劃分成許多更小的時(shí)間片，在每一個(gè)獨(dú)立時(shí)間片執(zhí)行一個(gè)線程的指令，到下一個(gè)時(shí)間片繼續(xù)執(zhí)行下一線程的指令，各線程輪流執(zhí)行，由于每一個(gè)時(shí)間片時(shí)間都比較短，所有線程都會(huì)運(yùn)行，對(duì)于使用者而言就好像所有線程在同時(shí)進(jìn)行。最終達(dá)到的效果就是在編程時(shí)可以創(chuàng)建多個(gè)線程，同一時(shí)間運(yùn)行，各線程可以"并行"運(yùn)行，以完成不同的任務(wù)。

這時(shí)新的問題也出現(xiàn)了，在多帶帶線程的運(yùn)行模式之下，一段代碼調(diào)用另一段代碼時(shí)，只能采用同步調(diào)用，只有當(dāng)前代碼執(zhí)行完成返回結(jié)果之后，調(diào)用才能繼續(xù)往下執(zhí)行。用一個(gè)例子就是現(xiàn)在只有一個(gè)水槽，一匹馬想喝水只能等上一匹馬走了才能繼續(xù)喝。

而有了多線程的支持，可以采用異步函數(shù)的調(diào)用，這個(gè)問題就迎刃而解了。

異步函數(shù)原理介紹

程序中會(huì)有很多內(nèi)容，計(jì)算內(nèi)容復(fù)雜、渲染內(nèi)容繁多，在處理過程中需要花費(fèi)比較多的時(shí)間。當(dāng)某個(gè)模塊A調(diào)用了模塊B的處理內(nèi)容時(shí)，這時(shí)模塊B中的內(nèi)容就需要一些時(shí)間處理，此時(shí)模塊A如果不停地等待，就會(huì)嚴(yán)重影響程序性能。在實(shí)際情況中，就比如在前端頁(yè)面中需要進(jìn)行在線填報(bào)的數(shù)據(jù)處理，需要對(duì)數(shù)據(jù)內(nèi)容進(jìn)行計(jì)算后放入表格中展示，這是由于計(jì)算并未完成，頁(yè)面內(nèi)容也不顯示，給用戶帶來的感覺就是內(nèi)容都點(diǎn)擊運(yùn)行了，但是頁(yè)面遲遲沒有任何反饋。

出現(xiàn)了異步函數(shù)的調(diào)用之后，此時(shí)執(zhí)行的模塊A和模塊B分別屬于不同的線程。

在異步調(diào)用中，模塊A不需要等到模塊B返回內(nèi)容，就可以繼續(xù)執(zhí)行后續(xù)代碼。

模塊B中的內(nèi)容執(zhí)行完畢后，會(huì)通知模塊A：我這邊處理完畢，你記得處理后續(xù)內(nèi)容。

借助異步調(diào)用，可以把剛剛我們提到的前端頁(yè)面中顯示問題進(jìn)行優(yōu)化：把整個(gè)初始化處理放進(jìn)一個(gè)多帶帶線程，主線程啟動(dòng)此線程后接著往下走，讓主窗口瞬間顯示出來。等思索需要進(jìn)行的操作的內(nèi)容時(shí)，數(shù)據(jù)計(jì)算處理就已經(jīng)在暗中處理完畢；程序開始穩(wěn)定運(yùn)行以后，異步調(diào)用還可以進(jìn)一步優(yōu)化人機(jī)交互的過程。用戶點(diǎn)擊鼠標(biāo)時(shí)進(jìn)行操作的時(shí)候，操作內(nèi)容比較費(fèi)時(shí)，點(diǎn)擊后系統(tǒng)沒有立馬作出回應(yīng)，這會(huì)讓用戶的使用體驗(yàn)很糟糕。將更費(fèi)時(shí)、速度更慢的操作內(nèi)容轉(zhuǎn)為異步調(diào)用，讓主線程隨時(shí)恭候下一條消息，這樣用戶的鼠標(biāo)操作動(dòng)作響應(yīng)速度更快，使用體驗(yàn)自然大大提升。

實(shí)踐：專家用戶的花式使用

實(shí)例演示

我們用一個(gè)簡(jiǎn)單的例子，看看在前端電子表格單元格計(jì)算中，如何使用異步函數(shù)。

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));

在這個(gè)算法中我們將設(shè)定的計(jì)算解析方法部分放在服務(wù)器上，方法名稱叫DECODE

下一步將參數(shù)用jquery.get請(qǐng)求發(fā)送到服務(wù)器中，然后獲取請(qǐng)求內(nèi)容后完成設(shè)置

然后將整個(gè)異步函數(shù)注冊(cè)進(jìn)入Spread中

最后在B1單元格中，輸入DECODE(A1)

這樣當(dāng)A1單元格內(nèi)容發(fā)生變化的時(shí)候，B1就會(huì)根據(jù)我們?cè)O(shè)定的計(jì)算規(guī)則重算成對(duì)應(yīng)內(nèi)容

異步函數(shù)的花式使用

工具總在不同人手中被挖掘出各種各樣的用法，而在去年冬天我們就收到了用戶反饋的異步函數(shù)的各種奇妙使用方式。

他們使用異步函數(shù)的參數(shù)組合成了一個(gè)SQL，發(fā)送給數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)查詢，并在查詢結(jié)束后顯示查詢結(jié)果。結(jié)果一切正確，但是卻出現(xiàn)了一個(gè)小問題。

在使用過程中，用戶發(fā)現(xiàn)查詢?cè)谡麄€(gè)過程中超過了四次，詢問我們是否是公式出錯(cuò)？

我們當(dāng)即開展問題排查，在查看源代碼的過程中我們發(fā)現(xiàn)，在最早實(shí)現(xiàn)這個(gè)功能的時(shí)候?yàn)榱藦?qiáng)調(diào)數(shù)據(jù)重要性，當(dāng)同一個(gè)公式中出現(xiàn)多個(gè)異步函數(shù)調(diào)用時(shí)，再次計(jì)算下一個(gè)內(nèi)容時(shí)我們還會(huì)再計(jì)算一次已經(jīng)計(jì)算過的異步函數(shù)的內(nèi)容。

沒想到用戶確實(shí)會(huì)這樣使用異步函數(shù)，這一部分內(nèi)容隨后也進(jìn)行整體調(diào)整。現(xiàn)已調(diào)整為每次調(diào)用只計(jì)算一次異步函數(shù)。

有了這次經(jīng)歷，再遇到用戶對(duì)異步函數(shù)的其他花里胡哨的用法，我們就見怪不怪了。