向用戶提供有關執行Javascript功能的反饋？

所以我在Javascript中構建了一個相當複雜的（從我的角度來看）客戶端Web應用程序。向用戶提供有關執行Javascript功能的反饋？

程序的基本功能是從用戶處獲取（相當龐大）一組字符串數據，從用戶處獲取關鍵字列表，執行搜索並返回true/false數組。

非常清楚它的工作原理是這樣：

var userData = ["lorem ipsum", "dolor sit amet", " consectetur adipisicing"]; 
var userKeywords = ["et","or"]; 
var isMatch = false; 

for (var x in userData){ 
    var y = 0; 
    while (y<userKeywords.length && !isMatch){ 
    isMatch = (userData[x].match(userKeywords[y]) !== null)? true : false; 
    y++; 
    } 
} 
// That would return [true, true, true]

（這僅僅是給你的主要思想）

因爲我處理的數據相當大的數量（50K ++）和關鍵字（〜50）我的程序可以運行幾分鐘。雖然我們知道不要驚慌，等待一個巨大的程序運行時，我的用戶不會...

所以，我想給他們上節目執行一些反饋正在運行時一樣一個基本的進度條會，但我無法找到。

我知道我可以計算我要求程序執行的任務的長度，然後增加一個計數器並將結果發佈到DOM中 - 但是這不是問題to access the DOM in a loop？

var userData = ["lorem ipsum", "dolor sit amet", " consectetur adipisicing"]; 
var userKeywords = ["et","or"]; 
var isMatch = false; 
var myTask = userData.length * userKeywords.length ; 
var myCounter = 0; 

for (var x in userData){ 
    var y = 0; 
    while (y<userKeywords.length && !isMatch){ 
    isMatch = (userData[x].match(userKeywords[y]) !== null)? true : false; 
    y++; 
    myCounter++; 
    console.log("Ran " + myCounter + " calculations out of " + myTask); 
    } 
}

那麼，我該如何向我的用戶反饋執行該程序？謝謝！

來源

2014-05-05 clecai

使用'setInterval'在每次調用之間延遲一段時間運行一個函數，並讓函數執行下一步並更新進度條。 – Barmar

根據您支持的瀏覽器，您可以與網絡工作人員（每http://caniuse.com/#feat=webworkers IE10是您的最低門檻）或「分塊」處理程序。使用回調或承諾，您可以非常輕鬆地創建一個標準api來支持 - 儘管網絡工作人員會更快，並且UI響應會更流暢。

下面是一個非常粗略的例子：http://plnkr.co/edit/u72tKlLR1yKvgJBsnUK9（請注意，在script.js的第5行，我禁用了網絡工作者，因爲大多數瀏覽器都會使用它，我希望能夠證明它在沒有它們的情況下也能正常工作 - 只需刪除&& false重新啓用）。

不幸的是我一直很懶，只是複製和粘貼你的代碼兩次。使用XHR，您可以將代碼保存在一個位置，然後使用Web Worker或Run函數將其引入。 '跑步者'是我過去爲了提供某種UI反饋而做的一件很常見的事情。它需要整個任務的「塊」，然後運行它，然後停下並等待一秒鐘，然後再轉到下一個塊。通常這足以讓屏幕更新。

來源

2014-05-05 10:39:58 Stephen

我不知道網絡工作者，我必須先了解更多關於他們的內容 - 我認爲這確實是解決方案。目前我的項目必須在本地運行（在進一步驗證之前），這不允許我使用Web工作人員（本地不支持Webkit）。無論如何，非常有幫助！ – clecai

如果你在本地構建，我真的推薦使用諸如https://github.com/devpaul/grunt-devserver之類的東西 - 它幾乎不像設置Apache那樣麻煩，讓你真正激發工作環境。 – Stephen

我知道我可以計算出我要求我的程序做任務的長度，然後增加一個計數器和結果發佈到DOM

我會去這一點。

document.getElementById('output_progress').innerHTML = y + "/" + userData.length;

如果你不想輸出什麼，然後告訴人們，節目仍然是工作的最佳方法是使用一個GIF圖像裝載機。這就是我通常在我的應用程序中添加的內容。

來源

2014-05-05 10:26:05 Starwave

嘿，我已經運行了一些測試，但沒有得到任何令人滿意的結果。JQuery（或者原生JS getElementById）沒有在函數完成運行之前更新DOM。當所有的數據被處理時，DOM最終被更新爲最高值...即使我使用回調函數，或者如果我設置了間隔/超時 - 這是奇怪的，也會發生這種情況。 – clecai

向用戶提供有關執行Javascript功能的反饋？

回答

相關問題