CODEWITHSUNDEEP
javascriptmapbox-gl-js
Miller
Miller

Reputation: 145

maximum call stack size exceeded on Mapbox

I have created a project using mapbox and I am trying to animate an icon along the route. This is my animation function's code sample:`

function animateicon(route,point,map) {
        point.features[0].geometry.coordinates = route.features[0].geometry.coordinates[counter];
        if (counter==route.features[0].geometry.coordinates.length-1)
           {

               point.features[0].geometry.coordinates = route.features[0].geometry.coordinates[0]
               map.getSource('point').setData(point);
               counter = 0;


                 }
        point.features[0].properties.bearing = turf.bearing(

            turf.point(route.features[0].geometry.coordinates[counter >= steps ? counter - 1 : counter]),
            turf.point(route.features[0].geometry.coordinates[counter >= steps ? counter : counter + 1])
        );
        map.getSource('point').setData(point);
        if (counter < 100) {
            console.log(counter);
            counter = counter + 1;          
            animateicon(route, point,map);
               }

       }

Everything works fine but after sometime I get this exception "maximum call stack size exceeded".Is there any way I can fix it?

Upvotes: 0

Views: 760

Answers (1)

MKougiouris
MKougiouris

Reputation: 2861

In javascript, when a function is executed there is a special place called "call stack" with is actually a stack (queue) of all methods executing. If for example you have function A, which calls function B inside it, which calls function C inside it, you essentially create a call stack in the order of:

|A|
|B|
|C|

When a function completed execution, it essentially surrenders execution time to each callee, or in other words the stack is evaluated from top to bottom, and each time a function returns the execution moves up 1 layer on the stack.

Now when we say that "maximum call stack exceeded" it means that your call stack is now so large that no more references can be held, and so things break.

This usually only happens on the case of recursive functions gone wrong. You have a recursive function, and the error seems to be that there is no "normal/logical" point at which it stops executing more recursions and just returns, unfolding the call stack backwards.

In essence your error must be somewhere on theese lines:

if (counter < 100) {
    console.log(counter);
    counter = counter + 1;          
    animateicon(route, point,map);
       }

where the actual recursion call is happening. Make sure that counter is indeed increased by 1 and that the scope of the counter variable is correct. Because you use that variable as your termination logic, if i were you i would pass the same variable down the line of the recursion like so:

var counter=0;
function animateicon(route,point,map,counter){ .... }

and then later on:

if (counter < 100) {
    console.log(counter);
    counter = counter + 1;          
    animateicon(route, point,map,counter);
       }

Upvotes: 1

Related Questions