Question

我已经使用mapbox创建了一个项目，并且正在尝试为路径上的图标设置动画。这是我的动画功能的代码示例：`

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);
               }

       }

一切正常，但是一段时间后，我收到此异常“超出了最大调用堆栈大小”。有什么办法可以解决？

Answer 1

在javascript中，执行函数时，有一个特殊的地方称为“调用堆栈”，实际上是所有执行方法的堆栈（队列）。例如，如果您有一个函数A，该函数在其中调用了函数B，又在其中调用了函数C，则实际上是按照以下顺序创建一个调用堆栈：

|A|
|B|
|C|

当函数完成执行时，它实际上将执行时间交给了每个被调用者，换句话说，从顶部到底部对堆栈进行了评估，并且每次函数返回执行时，堆栈上移了一层。

现在，当我们说“已超出最大调用堆栈数”时，这意味着您的调用堆栈现在太大了，无法容纳更多的引用，所以事情就中断了。

这通常仅在递归函数出错的情况下发生。您有一个递归函数，但错误似乎是没有“正常/逻辑”点停止执行更多的递归而只是返回，从而将调用堆栈向后展开。

实质上，您的错误必须在这些行中出现：

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

实际进行递归调用的位置。确保将计数器确实增加1，并且计数器变量的范围正确。因为您使用该变量作为终止逻辑，所以如果我是我，我会像下面这样在递归行中传递相同的变量：

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

，然后再输入：

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

Mapbox上超过了最大调用堆栈大小

1 个答案: