Question

I’ve got some issues with javascript. Which causes some problems.
I’m using DevExpress MVC GridView, ASP.Net MVC 3 and javascript.

This my problem:

I’ve got a gridview, with for example customers.
I want them to select the customers, and show them in a table generated by javascript so we dont get all those refreshes. And they can then add other information so that they can be saved again to another table, but thats not really important.

I perform some calculations before generating the table row from the selected customer. Another problem is, the devexpress gridview has an event that calls on each selection change instead of a nice ~100 ms wait so that the user can multiselect quick without triggering method 3/4 times.

Im keeping track of my own table through an array. And the GridView from DevExpress got his own events that can give me the right information, so no need to worry about that.
So I got a method receiveSelectionFields(Values){ //do something } where I receive that information from the gridview on every selection.
Then I check my array to see if they added or removed a selection, and which.
Then I call addtablerow(customer) or removetablerow(customer). Which removes the customer from my table and then from my array.

Because I make some heavy calculations in between, there is a ~60ms delay before the calculation is done (on mine computer). So if the users makes 2 selections in 60 ms. My array will have the wrong value (not being modified by the first call that adds/removes a customer) and my javascript will cause an error e.g. the table row is not deleted. I check on length of my own array and on the length of the received array to see if something has been added or removed.

So what did I try?
Making my method a recursive method, that when the problem occurs it waites 60 ms and then redo the method. But this isn’t working properly.

I tried adding a global variable busy, which is true when the method is still busy. And false when it ends. But my browser just quits when doing that. This was the code:

    while (true) {

        setTimeout(function () {
            if (busy === false) {
                break;
            }
        }, 50);
    }

But I got the feeling it just endlessly loops.

And these are all workarounds, there must be a nice way to solve this. Any thoughts?

In short:
I want a way to let the functions go off in synch. even if their being called asynch. by the user so that my array doesn’t mess up.

Found the answer why my problem exists:
Since javascript is a synch. language (1 thread). the functions should’ve triggered at the right time. The problem is the callback from DevExpress Gridview for MVC Extensions. It makes a callback to the server, which responds in for example ~150ms with the selected field values. This will give an error if you quickly trigger the devexpress function twice. The second trigger has a window to return FASTER then the first trigger. Which would mean my coding of the table get ruined since I check if something has been added or removed. So when the first trigger (which returns after the second trigger) and my table gets updated. It shows the table prior to my last selection. Thus missing 1 row or has 1 more row then it should’ve.

So I got to make a function that retrieves all the events, and then place them in an order ~200 ms after each order. To make sure there is enough time for the callback to retrieve. Though this is ofcourse still not reliable, I think I will just change the requirements on this.

Answer 1

Your while loop condition is true, therefore the loop will just continue endlessly. You may want to try the following:

var int = setInterval(function () {
    if(busy === false) {
        clearInterval(int);
    }
}, 50);

Try this instead of looping through the setTimeout over and over. If I had to guess, the break is breaking the if statement but not the while loop causing your browser to get stuck in an endless loop. With the above code, you can set an interval at which to run the code. In this instance, the code runs every 50ms. Once the condition inside the if statement is true, the setInterval is cleared causing the browser to continue executing its normal functionality.

Hope this helps.