Главная » Error » Uncaught RangeError: Maximum call stack size exceeded

Uncaught RangeError: Maximum call stack size exceeded

example

<текстареа class="multiSource" readonly="" onclick="this.focus()" ondblclick="this.select()">
(function x() {
x();
})();

When you run the above script you can see the call stack grows until it hits a maximum limit: the browser hardcoded stack size or memory exhaustion . So, whenever you are trying to code a recursive function then you’ll need a base case that stops the function to invoke itself .

<текстареа class="multiSource" readonly="" onclick="this.focus()" ondblclick="this.select()">
(function x(num) {
if ( ! num) { //This is the base case.
return;
}
x(–num);
})(20);

How to fix Maximum call stack size exceeded error

Be considerate while calling functions , also dry run is the best practice to prevent them. It’s possible to cause infinite recursion in a fully promisified code, too. That can happen if the promises in a chain don’t actually perform any asynchronous execution , in which case control never really returns to the event loop, even though the code otherwise appears to be asynchronous. That’s when it’s useful to wrap your recursive function call into a –

  1. setTimeout
  2. setImmediate or
  3. process.nextTick

Also, you can localize the issue by setting a breakpoint on RangeError type of exception , and then adjust the code appropriately. Moreover, you can managed to find the point that was causing the error by 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.

Memory limit of Call Stack

Javascript RangeError: Maximum call stack size exceeded

The Call Stack is what a program uses to keep track of method calls. The call stack is made up of stack frames — one for each method call. It is primarily used for function invocation (call). Since the call stack is single, function(s) execution, is done, one at a time, from top to bottom . It means that the call stack is synchronous .

When you enter a function, an entry for that function is pushed onto the Call stack and when you exit from the function, that same entry is popped from the Call Stack. Each method call creates its own stack frame , taking up space on the call stack. That’s important because it can impact the space complexity of an algorithm, especially when we use recursion. if you provide too many arguments or caught inside any unhandled recursive call. You will encounter Maximum call stack size exceeded error. For example:

<текстареа class="multiSource" readonly="" onclick="this.focus()" ondblclick="this.select()">
alert.apply(window, new Array(1000000000));

All functions arguments must fit on callstack(at least pointers of each argument). Here Array.apply(null, new Array(1000000)) , the currentLocalVariables object will be huge because it will have 1000000 variables inside. Since .apply() will pass each of the given array element as an argument to the function. Once pushed to the call stack this will exceed the memory limit of call stack and it will throw Maximum call stack size exceeded error.

Recursive Function in JavaScript

Recursion is a pattern in which a defined function calls itself, with each iteration moving conditions closer to a base case that allows an escape from the function calls. However, if you’re not careful, a function can continuously call itself until the browser’s stack is depleted.

The most common cause of a recursive function’s Maximum call stack size exceeded error is a problem with the base case or the lack thereof. When recursive code doesn’t have its base code or shoots past it, it will keep calling itself until the browser’s Maximum Call Stack is reached.

Fix a Recursive Function in JavaScript

The issue with a recursive function that continues to call on itself is that it is impossible to move on to the following function within a chain, and you’ll eat up the entirety of your stack.

Double-checking your recursive functions is the best approach to avoid this issue. Then, to solve the problem, specify a base case that must be satisfied to exit the recursion.

The screenshot below shows what recursive code looks like when it calls on itself indefinitely.

function example() {
// RangeError: Maximum call stack size exceeded
example();
}
example();

You can call the function, which calls itself until the call stack limit is exceeded. After that, you must specify a condition where the function stops calling itself to solve the error.

let counter = 0;

function example(num) {
if (num < 0) { return; }counter += 1; example(num - 1); }example(4);console.log(counter);

This time you will check if the function was invoked with a number that is less than 0 on every invocation. If the number is less than 0, you will return from the function, so you do not exceed the call stack’s limit.

If the passed-in value is not less than zero, you will call the function with the passed-in value, which is 1. This will keep you moving toward the case where the if check is satisfied.

A recursive function keeps on calling itself until a condition is met. For example, if there is no condition to complete your function, it will call itself until the maximum call stack size is exceeded.

You’ll receive this error if you have an infinite loop that calls a function.

function sum(x, y) {
return x + y;
}

while (true) {
sum(10, 10);
}

The while loop will keep calling the function, and since you don’t have a condition that would exit the loop, you will eventually exceed the call stack size.

This behaves similarly to a function that calls itself without a base condition. For example, the same would be the case if you used a for loop.

Below is an example of how you can specify a condition that must be met to exit the loop.

function sum(x, y) {
return x + y;
}

let total = 0;

for (let i = 10; i > 0; i–) {
total += sum(5, 5);
}

console.log(total);

The condition in the for loop will not be satisfied if the i variable is equal to or less than 0; thus, you will leave the loop.

Источники

  • http://net-informations.com/js/err/range.htm
  • https://www.delftstack.com/howto/javascript/javascript-maximum-call-stack-size-exceeded/
[свернуть]
Решите Вашу проблему!


×
Adblock
detector