還是百度前端技術學院的“任務十九”可視化排序算法的題，在寫出快速排序算法之后，要求用動畫的形式把這個排序過程呈現出來。排序過程在CPU里不過是瞬間的事，但要轉換成“緩慢的”動畫效果給人類看，就不得不把這個過程速度降下來。

首先想到的是，Javascript有沒有像C++、Java那樣提供Sleep函數？

答案是：沒有。因為Javascript是單線程語言，一旦Sleep，整個程序就阻塞住了，瀏覽器也將失去響應交互的能力，就像死了一樣。因此，通過寫個空循環來占用CPU時間以間接實現Sleep的方法，同樣不可取。

此路不通，嘗試別的思路。記得JS里有個常用的定時函數setTimeout，可以把指定的函數延時執行。于是我修改了排序函數代碼，其中最后遞歸部分如下：

function visualSort(array,low,high,barArray) {//排序****// 遞歸對左右子序列排序var fn=arguments.callee;var that=this;setTimeout(function(){fn.call(that,array,low,i-1,barArray);},500);setTimeout(function(){fn.call(that,array,i+1,high,barArray);},500); }

這樣屏幕上看到的豎條確實可以從低到高排好序，但還是有問題：動畫的“幀數”也太少了吧？好多地方還沒有被改成“正在排序”的顏色，就直接變成有序的了。

原因也不難理解，參考這篇文章：《關于setTimeout，理解JavaScript定時機制》?，兩個遞歸函數是被緊挨著放進JS引擎的任務隊列的，前一個函數剛返回，就緊接著執行后一個函數，人的肉眼根本來不及看到GUI渲染的變化。

若是把兩個遞歸函數的延時設成不同值，比如一個500一個800，倒是可以解決這個問題，但我們看到的排序執行順序將會混亂：一會兒在執行左半邊的遞歸，一會兒又跳到右半邊執行一下。而且“每一幀”之間的間隔時間也不一定。這也不是我們想要的結果。

還有沒有別的辦法，可以精確地控制執行順序和時間間隔？答案是：有！受這篇文章（《jQuery鏈式操作》）的啟發，思路豁然開朗：只需用一個隊列將待執行的函數一個個入隊，定時出隊并執行出隊的函數就可以了。代碼如下：

function visualSort(array,low,high,barArray){//排序****//遞歸對左右子序列排序var fn=arguments.callee;var that=this;if(i > low) actionList.push(function(){fn.call(that,array,low,i-1,barArray);});if(i < high) actionList.push(function(){fn.call(that,array,i+1,high,barArray);}); }

然后在doAction函數里調用出隊的函數、以及設置下次調用的時間間隔：

function doAction(){if(actionList.length==0){isReady=false;//還原所有染色區域**}if(!isReady) return;(actionList.shift())(); // 取出第一個函數并執行 // 延時執行下一個函數 setTimeout(arguments.callee,interval); }

開始時，將起始的visualSort函數入隊，再調用一下doAction函數。嗯！這種方法通過回調函數的形式有序調用遞歸函數，效果是基本令人滿意的。

按上述代碼執行的快排遞歸過程，本質上是一個廣度優先遍歷二叉樹的過程。要改成深度優先也很簡單，加一個棧即可：

// 排序函數的最后部分 function visualSort(array,low,high,barArray) {// 排序**// 對左子序列排序的遞歸函數入隊，對右子序列排序的入棧var fn=arguments.callee;var that=this;if(i > low) leftList.push(function(){fn.call(that,array,low,i-1,barArray);});if(i < high) rightList.push(function(){fn.call(that,array,i+1,high,barArray);}); }// 實現異步阻塞的函數 function doAction(){if(leftList.length + rightList.length==0){isReady=false;//還原所有染色區域**}if(!isReady) return;if(leftList.length>0){(leftList.shift())(); // 出隊并執行 }else if(rightList.length>0){(rightList.pop())(); // 彈棧并執行 }// 延時執行下一個函數 setTimeout(arguments.callee,interval); }

?

這樣就能看到豎條一根根從左到右排好啦。

?

轉載于:https://www.cnblogs.com/leegent/p/5326832.html

總結

以上是生活随笔為你收集整理的JS异步阻塞的迷思的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。