Give user feedback on the execution of a Javascript function?

Question

So I'm building a rather complex (from my standpoint) client-sided web-app in Javascript.

What the program does basically is take a (rather huge) set of string data from the user, take a list of keywords from the user, perform a search and return an array of true/false.

Very plainly it works that way :

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]

(that was just to give you the main idea)

Because I'm dealing with rather big quantities of data (50K ++) and keywords (~50) my program can run for a couple minutes. Whilst we know not to panic and wait when a huge program is running, my users won't...

So I wanted to give them some feedback on the execution of the program while it is running like a basic progress bar would, but I couldn't find how.

I know I could calculate the length of the task I'm asking my program to do, then increment a counter and post the result into the DOM - but wouldn't it be a problem 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);
    }
}

So, how can I give feedback to my user on the execution of the program ? Thanks!

Answer 1

Depending on your supported browsers, you could either go with web workers (per http://caniuse.com/#feat=webworkers IE10 is your minimum threshold), or a 'chunked' handler. Using callbacks or promises, you can pretty easily create a standard api that will support either - though the webworkers will be faster and the UI response will be smoother.

Here's a super rough example: http://plnkr.co/edit/u72tKlLR1yKvgJBsnUK9 (note that on line 5 of script.js I've disabled the web workers, as most of our browsers would use it anyway and I was hoping to show that it would work without them - just remove the && false to reenable).

Unfortunately I've been lazy and just copied and pasted your code twice. Using XHR's, you could keep your code in one spot, then pull it in with both the web worker or the run function. The 'runner' is a pretty common thing I've done in the past to give some sort of UI feedback. It takes a "chunk" of the overall task, runs it.. then stops and waits for a second before moving on to the next chunk. Usually that's enough to allow the screen to update.

Answer 2

I know I could calculate the length of the task I'm asking my program to do, then increment a counter and post the result into the DOM

I would go with that.

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

And if you don't want to output anything, then the best way of telling people that program is still working is with a gif loader image. That's what I usually add in my apps.