jQuery異步函數調用，沒有AJAX請求

Question

這似乎很愚蠢，但我無法找到如何做一個與jQuery不涉及一些服務器端請求的異步函數調用。我有一個緩慢的函數，它遍歷了很多DOM元素，並且我希望瀏覽器在該函數運行時不會凍結。我想在慢速函數被調用之前顯示一個小指示器，然後當慢速函數返回時，我想隱藏指示器。我有以下幾點：

$('form#filter', parentNode).submit(function() { 
    var form = $(this); 
    indicator.show(); 
    var textField = $('input#query', form); 
    var query = jQuery.trim(textField.val()); 
    var re = new RegExp(query, "i"); 
    slowFunctionCall(); // want this to happen asynchronously; all client-side 
    indicator.hide(); 
    return false; 
}); 

目前，我提交表單並沒有顯示指示，瀏覽器凍結，然後slowFunctionCall完成。

編輯：我用Vivin's answer，特別是Sitepoint link得到以下解決方案：

var indicator = $('#tagFilter_loading', parentNode); 
indicator.hide(); 
var spans = $('div#filterResults span', parentNode); 
var textField = $('input#query', parentNode); 
var timer = undefined, processor = undefined; 
var i=0, limit=spans.length, busy=false; 
var filterTags = function() { 
    i = 0; 
    if (processor) { 
    clearInterval(processor); 
    } 
    indicator.show(); 
    processor = setInterval(function() { 
    if (!busy) { 
     busy = true; 
     var query = jQuery.trim(textField.val()).toLowerCase(); 
     var span = $(spans[i]); 
     if ('' == query) { 
     span.show(); 
     } else { 
     var tagName = span.attr('rel').toLowerCase(); 
     if (tagName.indexOf(query) == -1) { 
      span.hide(); 
     } 
     } 
     if (++i >= limit) { 
     clearInterval(processor); 
     indicator.hide(); 
     } 
     busy = false; 
    } 
    }, 1); 
}; 
textField.keyup(function() { 
    if (timer) { 
    clearTimeout(timer); 
    } 
    /* Only start filtering after the user has finished typing */ 
    timer = setTimeout(filterTags, 2000); 
}); 
textField.blur(filterTags); 

這顯示和隱藏的指示，也不會凍結瀏覽器。您可以在工作時看到隱藏的DOM元素，這正是我所要做的。

Answer 1

Javascript運行在一個單獨的線程，因此如果你有一個緩慢的功能，它將阻止其他的一切。

UPDATE

那會做一些你想要的東西，但要記住，他們不是廣泛支持IE支持（我認爲他們將在IE10）。

Web的一些工人資源：

• Using Web workers
• Wikipedia article on Web Workers
• WHATWG: Web Workers

這裏是實現多線程沒有網絡工作者幾資源。需要注意的是，這是不是「真正的」多線程是很重要的：

• Multi-threading in Javascript（標題是有點誤導，它不是真正的多線程）
• Why doesn't Javascript support multi-threading?
• Is there some way to do multi-threading in Javascript?
• Simulating multi-threading using IFRAMEs（我不確定這種方法有多可行;它可能比它的價值更麻煩，收益遞減規律可能適用。）

Answer 2

我正要去建議看看超時但唉。 John Resig（jQuery的）這篇文章解釋了一些關於JavaScript如何處理其單線程的內容。 http://ejohn.org/blog/how-javascript-timers-work/

This article還解釋說：「有一件事在JavaScript異步執行功能時，需要記住，在頁面中所有其他的JavaScript執行暫停，直到一個函數調用完成。這是當前所有的瀏覽器如何執行JavaScript，並能引起。如果你試圖同時異步地調用太多的東西，真正的性能問題。一個長時間運行的函數實際上會爲用戶「鎖定」瀏覽器。這同樣適用於同步的函數調用。」

所有這一切說，這是可能的，你可以模擬一個異步功能，打破你正在做的到更小的塊無論循環使用setTimeout調用自己（）。

例如這樣的功能：

// Sync 
(function() { 
    for(var x = 0; x < 100000; ++x) {console.log(x)} 
})() 

// ASync 
var x = 0; 
setTimeout(function() { 
    console.log(x++); 
    if(x < 100000) setTimeout(arguments.callee, 1); 
} ,1) 

Answer 3

你可能想web workers!

編輯：我很驚訝有多少人跳樓「它不可能」，所以我會詳細說明。網絡工作者是HTML 5 spec的一部分。它們允許你派生線程在後臺運行腳本而不會阻塞UI。它們必須是外部的js文件，由

var worker = new Worker('my_task.js'); 

調用並通過事件傳送。