stack overflow in Chrome when fnDestroying very large tables, and a fix
stack overflow in Chrome when fnDestroying very large tables, and a fix
BriLance
Posts: 1Questions: 0Answers: 0
I have a case where I need to call fnDestroy on a very large, 5,000+ row datatable. (Yes, I realize that this is excessively large, but that's what the client wants.)
This call to fnDestroy was causing the following error in Chrome: "Uncaught RangeError: Maximum call stack size exceeded".
I did some research, and found that Chrome will throw this error even when there is no recursion involved, in the case of extremely large arrays. Apparently it chokes on some arrays that even other browsers can handle.
Armed with this info, I tracked the problem down to the following line, which is line 5435 in DataTables 1.9.4 (unminified):
[code]
$(oSettings.nTableWrapper).find('*').andSelf().unbind('.DT');
[/code]
In our case, the wildcard selector there would create an array that is more than 100,000 elements long, which causes Chrome to throw its stack overflow error.
I fixed this problem in our local copy by adding an array that keeps track of every object to which an event is bound in the object, and then iterating through that array to unbind .DT events, instead of using the general selector.
[code]
//aoBoundEvents is the array of jquery-wrapped elements to which events have been bound
for (var x = _aoBoundEvents.length; x--; ){
_aoBoundEvents[x].unbind(".DT");
}
[/code]
This is probably not a problem that many people will run into, since our tables are excessively large. Nonetheless, it might be worth considering making this change to the library code, since it is not too much more complicated than the existing version and the issue might affect other people here and there.
This call to fnDestroy was causing the following error in Chrome: "Uncaught RangeError: Maximum call stack size exceeded".
I did some research, and found that Chrome will throw this error even when there is no recursion involved, in the case of extremely large arrays. Apparently it chokes on some arrays that even other browsers can handle.
Armed with this info, I tracked the problem down to the following line, which is line 5435 in DataTables 1.9.4 (unminified):
[code]
$(oSettings.nTableWrapper).find('*').andSelf().unbind('.DT');
[/code]
In our case, the wildcard selector there would create an array that is more than 100,000 elements long, which causes Chrome to throw its stack overflow error.
I fixed this problem in our local copy by adding an array that keeps track of every object to which an event is bound in the object, and then iterating through that array to unbind .DT events, instead of using the general selector.
[code]
//aoBoundEvents is the array of jquery-wrapped elements to which events have been bound
for (var x = _aoBoundEvents.length; x--; ){
_aoBoundEvents[x].unbind(".DT");
}
[/code]
This is probably not a problem that many people will run into, since our tables are excessively large. Nonetheless, it might be worth considering making this change to the library code, since it is not too much more complicated than the existing version and the issue might affect other people here and there.
This discussion has been closed.
Replies
I'll take a look and commit a fix.
Allan
Thanks for bring this up!
Allan