CODEWITHSUNDEEP
javascript
Laura Lecharpentier
Laura Lecharpentier

Reputation: 77

Javascript code causing IE freeze

I have the below code causing Internet Explorer to freeze. It's a project that involves processing student grades as an assignment:

var array1 = StudentGradeAreadHugeList();

var nextArrayItem = function() {
    var grade = array1.pop();

    if (grade) {
        nextArrayItem();
    }
};

i hope you can help me with this.

Upvotes: 2

Views: 772

Answers (3)

Leb_Broth
Leb_Broth

Reputation: 1111

You could show more info about the application you're trying to do. But I believe it's a matter of stack overflow (maybe you're using a big list). So, to overcome that you should modify the "nextArrayItem":

window.setTimeout (nextArrayItem, 0)

The freeze incurring mainly from the big data, but now the Event Loop will handle the Recursion process and not your Call Stack.

Upvotes: 2

Will Chen
Will Chen

Reputation: 68

There's two problems here:

  1. You might be exceeding the call stack limit
  2. Your if-conditional is set-up incorrectly

For the first issue: As one of the previous responders mentioned, if you have a very large list you can exceed the limit of the call stack since you need to do a recursive call for each element. While doing setTimeout might work, it feels like a hack-y solution. I think the real issue is that your function is handling the array recursively rather than iteratively. I would recommend re-writing your function using a for-loop.

For the second issue:

Let's say in this case your array was set to [100, 90, 80]. When you invoke nextArrayItem() it will work properly the first two time, but the third time you call nextArrayItem() you are popping off the last remaining item (in this case 100) and your grade will be set to 100 which is a truthy value. Therefore, your if-conditional will pass and your function erroneously try to invoke itself again despite the fact that your array is now empty and the program should now exit the call stack.

I tried testing your code using my example in Chrome and what happens is that it will recurse one too many times and invoke pop on an empty array, which will return undefined.

You can fix this issue by changing the if conditional to check for the last element in the array after you have popped the array.

See revised code:

var nextArrayItem = function() {
    var grade = array1.pop();

    if (array1[array1.length-1]) {
        nextArrayItem();
    }
};

Upvotes: 0

Axel Amthor
Axel Amthor

Reputation: 11096

This is likely caused by an endless recursion. Be aware of proper handling of return values in IE:

var array1 = StudentGradeAreadHugeList();

var nextArrayItem = function() {
    var grade = array1.pop();

    if ( grade !== null && typeof(grade) !== "undefined" ) {
        nextArrayItem();
    }
};

pop() on an empty array will not return boolean false but a typeless "undefined".

Upvotes: 0

Related Questions