maximum call stack size exceeded ajax,Maximum call stack size exceeded error

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I am using a Direct Web Remoting (DWR) JavaScript library file and am getting an error only in Safari (desktop and iPad)

It says Maximum call stack size exceeded.

What exactly does this error mean and does it stop processing completely?

Also any fix for Safari browser (Actually on the iPad Safari, it says JS:execution exceeded timeout

which I am assuming is the same call stack issue)

回答1:

It means that somewhere in your code, you are calling a function which in turn calls another function and so forth, until you hit the call stack limit.

This is almost always because of a recursive function with a base case that isn't being met.

Viewing the stack

Consider this code... (function a() { a(); })();

Here is the stack after a handful of calls...

As you can see, the call stack grows until it hits a limit: the browser hardcoded stack size or memory exhaustion.

In order to fix it, ensure that your recursive function has a base case which is able to be met... (function a(x) { // The following condition // is the base case. if ( ! x) { return; } a(--x); })(10);

回答2:

You can sometimes get this if you accidentally import/embed the same JS file twice, worth checking in your resources tab of the inspector :)

回答3:

In my case, I was sending input elements instead of their values: $.post( '',{ registerName: $('#registerName') } )

Instead of: $.post( '',{ registerName: $('#registerName').val() } )

This froze my Chrome tab to a point it did even show me the 'Wait/Kill' dialog for when the page becomes unresponsive...

回答4:

There is a recursive loop somewhere in your code (i.e. a function that eventually calls itself again and again until the stack is full).

Other browsers either have bigger stacks (so you get a timeout instead) or they swallow the error for some reason (maybe a badly placed try-catch).

Use the debugger to check the call stack when the error happens.

回答5:

In my case, I was converting a large byte array into a string using the following: String.fromCharCode.apply(null, new Uint16Array(bytes))

bytes contained several million entries, which is too big to fit on the stack.

回答6:

Check the error details in the Chrome dev toolbar console, this will give you the functions in the call stack, and guide you towards the recursion that's causing the error.

回答7:

If you need a infinite process/recursion running for some reason, you can use a webworker in a seperate thread. http://www.html5rocks.com/en/tutorials/workers/basics/

if you want to manipulate dom elements and redraw, use animation http://creativejs.com/resources/requestanimationframe/

回答8:

In my case click event was propagating on child element. So, I had to put e.stopProgration()

on click event. $(document).on("click", ".remove-discount-button", function (e) { e.stopPropagation(); //some code }); $(document).on("click", ".current-code", function () { $('.remove-discount-button').trigger("click"); });

Here is the html code

回答9:

The problem with detecting stackoverflows is sometimes the stack trace will unwind and you won't be able to see what's actually going on.

I've found some of Chrome's newer debugging tools useful for this.

Hit the Performance tab, make sure Javascript samples are enabled and you'll get something like this.

It's pretty obvious where the overflow is here! If you click on extendObject you'll be able to actually see the exact line number in the code.

You can also see timings which may or may not be helpful or a red herring.

Another useful trick if you can't actually find the problem is to put lots of console.log statements where you think the problem is. The previous step above can help you with this.

In Chrome if you repeatedly output identical data it will display it like this showing where the problem is more clearly. In this instance the stack hit 7152 frames before it finally crashed:

回答10:

Both invocations of the identical code below if decreased by 1 work in Chrome 32 on my computer e.g. 17905 vs 17904. If run as is they will produce the error "RangeError: Maximum call stack size exceeded". It appears to be this limit is not hardcoded but dependant on the hardware of your machine. It does appear that if invoked as a function this self-imposed limit is higher than if invoked as a method i.e. this particular code uses less memory when invoked as a function.

Invoked as a method: var ninja = { chirp: function(n) { return n > 1 ? ninja.chirp(n-1) + "-chirp" : "chirp"; } }; ninja.chirp(17905);

Invoked as a function: function chirp(n) { return n > 1 ? chirp( n - 1 ) + "-chirp" : "chirp"; } chirp(20889);

回答11:

In my case, two jQuery modals were showing stacked on top of each other. Preventing that solved my problem.

回答12:

you can find your recursive function in crome browser,press ctrl+shift+j and then source tab, which gives you code compilation flow and you can find using break point in code.

回答13:

I also faced similar issue here is the details when uploading logo using dropdown logo upload box cloud_upload

Drag and drop a file here, or click to upload

CSS.css .uploader { position:relative; overflow:hidden; height:100px; max-width: 75%; margin: auto; text-align: center; img{ max-width: 464px; max-height: 100px; z-index:1; border:none; } .drag-drop-zone { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.12); padding: 32px; } } .uploader img{ max-width: 464px; max-height: 100px; z-index:1; border:none; } .greyLogoBox { width: 100%; background: #EBEBEB; border: 1px solid #D7D7D7; text-align: center; height: 100px; padding-top: 22px; box-sizing: border-box; } #filePhoto{ position:absolute; width:464px; height:100px; left:0; top:0; z-index:2; opacity:0; cursor:pointer; }

before correction my code was : function handleImage(e) { var reader = new FileReader(); reader.onload = function (event) { οnclick="$('#filePhoto').click()" $('.uploader img').attr('src',event.target.result); } reader.readAsDataURL(e.target.files[0]); }

The error in console:

I solved it by removing οnclick="$('#filePhoto').click()" from div tag.

回答14:

I was facing same issue I have resolved it by removing a field name which was used twice on ajax e.g jQuery.ajax({ url : '/search-result', data : { searchField : searchField, searchFieldValue : searchField, nid : nid, indexName : indexName, indexType : indexType }, .....

回答15:

I know this thread is old, but i think it's worth mentioning the scenario i found this problem so it can help others.

Suppose you have nested elements like this:

You cannot manipulate the child element events inside the event of its parent because it propagates to itself, making recursive calls until the exception is throwed.

So this code will fail: $('#profile-avatar-picker').on('click', (e) => { e.preventDefault(); $('#profilePictureFile').trigger("click"); });

You have two options to avoid this: Move the child to the outside of the parent.

Apply stopPropagation function to the child element.

回答16:

I had this error because I had two JS Functions with the same name

回答17:

If you are working with google maps, then check if the lat lng are being passed into new google.maps.LatLng are of a proper format. In my case they were being passed as undefined.

回答18:

Another option that causes this error If you convert to json with socket. export class User { constructor(socket: Socket, name: string) { this.socket = socket; this.name = name; } name : string; socket : Socket; } ... let json: string = JSON.stringify(user);