異步javascript的原理和實現(xiàn)技巧介紹

2024-05-06 14:20:56

字體：大中小

來源：轉載

供稿：網(wǎng)友

因為工作的需要，我要在網(wǎng)頁端編寫一段腳本，把數(shù)據(jù)通過網(wǎng)頁批量提交到系統(tǒng)中去。所以我就想到了Greasemonkey插件，于是就開始動手寫，發(fā)現(xiàn)問題解決得很順利。但是在對腳本進行總結和整理的時候，我習慣性地問了自己一個問題：能不能再簡單點？
我的答案當然是“能”。

首先回顧我的數(shù)據(jù)批量提交的需求：我有一批用戶數(shù)據(jù)要插入到系統(tǒng)中，但是因為系統(tǒng)庫表結構不是行列式的，所以無法轉化為sql語句插入。要插入的數(shù)據(jù)有接近200條，就是傻呵呵地手工錄入到系統(tǒng)，估計也要1天的時間。作為程序員，當然不會干這么傻的事情，我一定要用程序來解決。這個編程的過程耗費了我1天的時間。相比手工錄入，我額外收入是這篇博文，絕對的合算！

編程平臺選擇沒花費時間，直接選定基于Greasemonkey寫自己的腳本，瀏覽器當然是firefox了。腳本的工作過程：
在腳本中預先存放要插入的數(shù)據(jù)
模擬鼠標點擊，打開頁面中的輸入窗口
將數(shù)據(jù)錄入到輸入窗口，并模擬點擊“提交”按鈕，將數(shù)據(jù)提交到系統(tǒng)中。
依次循環(huán)，直到所有數(shù)據(jù)都處理完畢。

這里的技術難點在于：
打開輸入窗口，需要等待不定期的時間，視網(wǎng)絡情況而定。
提交數(shù)據(jù)到后臺，需要等待處理完畢之后才可以循環(huán)下一個數(shù)據(jù)。
如果我是菜鳥的話，我當然直接寫一個類似這樣的應用邏輯：
代碼如下:
for(var i = 0; i < dataArray.length; ++i)
{ 3: clickButtonForInputWindow();
waitInputWindow();
enterInputData(dataArray[i]);
clickSubmitButton();
waitInputWindowClose();
}

實際上這樣寫所有瀏覽器都會陷入一片白屏，并在若干分鐘之后提示“沒有響應”而被強行終止掉。原因就是瀏覽器在調用javascript的時候，主界面是停止響應的，因為cpu交給js執(zhí)行了，沒有時間去處理界面消息。

為了滿足“不鎖死”的要求，我們可以把腳本修改成這樣：
代碼如下:
for(var i = 0; i < dataArray.length; ++i)
{
setTimeout(clickButtonForInputWindow);
…
setTimeout(waitInputWindowClose);
}

實際上setTimeout和setInterval是瀏覽器唯一可以支持異步的操作。如何更優(yōu)雅地使用這兩個函數(shù)來實現(xiàn)異步操作呢？目前簡單的答案是老趙的Wind.js。雖然我沒有用過這個函數(shù)庫，但是光是$await調用，就是符合我一貫對簡潔的要求的。但是對于我這樣的單個文件的腳本來說，去網(wǎng)上下載一個外部js庫，明顯不如有一段支持異步操作的代碼拷貝過來的快和爽。

所以我決定另辟蹊徑，做一個不要編譯而且易用性還可以更能夠Copy&Paste的異步函數(shù)庫。

說異步之前，我們一起回憶一下同步操作的幾種結構類型：

順序：就是語句的先后順序執(zhí)行

上一篇：Google的跟蹤代碼動態(tài)加載js代碼方法應用

下一篇：Javascript開發(fā)之三數(shù)組對象實例介紹