我最近開始使用jQuery,今天發現了一個奇怪的問題,它是如何爲我表現的。據我所知,JavaScript是單線程的。所以它的所有操作都應該以FIFO爲基礎運行。但是,這似乎並不適合我。請考慮以下事項。jQuery沒有以正確的順序執行?
SETUP是如下
HTML:
3的div
DIV#1 =>包含可點擊來執行排序功能
- 首標元素
div#2 =>包含需要排序的數據
DIV#3 =>包含用於通知正在執行
jQuery的 一些操作的用戶的基本.gif要點 - 包含排序函數確實DOM操作。基本上,它從HTML頁面讀取數據,存儲在二維數組中,並對數組進行排序。然後它完全清除div#2(data div),並使用來自排序數組的數據重建它。
EXECUTION預計是如下
- 用戶點擊標題之一來觸發排序功能
- 排序函數隱藏DIV#2和示出DIV#3
- 排序功能是執行
- 一旦排序完成,div#2(data div)被顯示,div#3被隱藏
然而,這裏是什麼似乎發生
用戶點擊標題
排序發生
隱藏和申報單的表現發生在最後一步
最初,由於我無法看到任何div顯示/隱藏,我假設它發生得太快,我不能注意到。所以我給jQuery的.show()和.hide()函數添加了時間延遲。一旦完成,很明顯,展示和隱藏行動正在結束。
*解* 一番搜索後,我好不容易如我所料通過使用jQuery .queue()和.dequeue()函數來得到這個工作。這裏的致命弱點是我必須在每次操作之間插入1毫秒的延遲。然後,只有這樣,瀏覽器才能夠按照我的意願隱藏/顯示div。因此,操作又是這樣的:
var theQueue = $({}); // jQuery on an empty object
theQueue.queue("testQueue",
function(next) {
$("#loadingIndicator").show();
$("#cases").hide();
next();
}
);
theQueue.delay(1, "testQueue");
theQueue.queue("testQueue",
function(next) {
doSort(columnNumber); //SORT
next();
}
);
theQueue.delay(1, "testQueue");
theQueue.queue("testQueue",
function(next) {
$("#loadingIndicator").hide();
$("#cases").show();
next();
}
);
theQueue.dequeue("testQueue");
}
我肯定不會對此事的專家,但我認爲操作應該以相同的順序執行,因爲他們被稱爲。瀏覽器沒有按照正確的順序渲染? jQuery是否改變操作的順序以使事情更有效率?
儘管「解決方案」完成了這項工作,但我並不認爲這是這種情況下的最佳解決方案。有沒有其他方法可以做到這一點?如果需要,我可以提供能夠證明問題的工作代碼示例。謝謝。
另一方面,我注意到大數據集,當用戶點擊一個頭元素來觸發排序時,瀏覽器變得沒有反應。我意識到它正在執行排序功能,但我希望有一種方法可以避免這種情況。有什麼想法嗎?
太棒了,謝謝你的易於解釋。我現在正在使用這種方法,我必須說它使用的代碼少於我使用的其他隊列方法。乾杯。 – Harinder 2010-10-21 14:09:50