地图更新后程序崩溃

Question

我是网络开发和开发程序的初学者，在该程序中，我通过使用传单通过ajax调用来更新地图，并且效果很好。现在我每10秒更新一次地图，因此我的更新地图的功能如下：

 function update_the_map(){                 
                      $.ajax({
                        type: "GET",
                        async : false,
                        url: 'http://backendserver:port/update, 
                        success: function(data) {
                            var n=0;
                            for (j = 0; j<3000; j++) { 


                                if(linestring['features'][j]['properties']['color']!=data[j].color){
                                      linestring['features'][j]['properties']['color']=data[j].color;
                                }   

                            }

                    if (vectorGrid) {

                        vectorGrid.remove(); 
                                console.log("removed the previous layer");

                            }

                            var vectorGrid = L.vectorGrid.slicer(linestring, {
                                rendererFactory: L.svg.tile,
                                vectorTileLayerStyles: {
                                    sliced: function(properties, zoom) {

                                        return {

                                            weight: 2,
                                            opacity: 1,

                                            color: getColor(properties.color),


                                            fillOpacity: 0.7
                                        }
                                    }
                                },
                                interactive: true,
                                getFeatureId: function(f) {
                                    return f.properties.id;
                                }
                            })




                            .addTo(map);                            

                            console.log("updated the new layer");

                        },
                        error: function (xhr, ajaxOptions, thrownError) {

                            alert(thrownError);
                          },
                        complete: function() {
                         if(time){
                             clearTimeout(time);

                         }

                         time= setTimeout(update_the_map, 10000);
                        }
                      });

            }

然后我在

<script type="text/javascript">
    window.onload = mapupdatecolor();

</script>

但这可以正常工作一段时间，然后该错误表明浏览器没有内存，因此当我查看相同的错误时，我认为超时功能应该有问题。 但是无法准确找到错误发生的地方。我们将尽一切帮助。

Answer 1

看完你的代码。 浏览器内存不足的唯一原因似乎是L.vectorGrid.slicer的实例化。

在创建新实例之前，应尝试释放所删除实例所使用的内存。

这可能还不够，但是您可以在vectorGrid.remove();之后执行此操作vectorGrid.remove(); ：

delete vectorGrid;

如果它不能解决您的问题。 寻找一种方法来清理vectorGrid创建的所有内容。

更新：

我只是注意到您的vectorGrid变量在每个ajax成功函数调用中都被重新声明，并且对于一个调用是局部的。 这也可能是内存泄漏的原因。 垃圾回收器可能会认为此局部变量永远不会无用，因此不会“释放”内存。

您可以尝试以下方法：

// HERE IS A CHANGE
var vectorGrid;

function update_the_map(){                 
    $.ajax({
        type: "GET",
        async : false,
        url: 'http://backendserver:port/update', 
        success: function(data) {
            var n=0;
            for (j = 0; j<3000; j++) { 
                if(linestring['features'][j]['properties']['color']!=data[j].color){
                    linestring['features'][j]['properties']['color']=data[j].color;
                }   
            }

            if (vectorGrid) {
                vectorGrid.remove();
                // HERE IS A CHANGE 
                vectorGrid = undefined;
                console.log("removed the previous layer");
            }

            // HERE IS A CHANGE
            vectorGrid = L.vectorGrid.slicer(linestring, {
                rendererFactory: L.svg.tile,
                vectorTileLayerStyles: {
                    sliced: function(properties, zoom) {

                        return {

                            weight: 2,
                            opacity: 1,

                            color: getColor(properties.color),


                            fillOpacity: 0.7
                        }
                    }
                },
                interactive: true,
                getFeatureId: function(f) {
                    return f.properties.id;
                }
            })




                .addTo(map);                            

            console.log("updated the new layer");

        },
        error: function (xhr, ajaxOptions, thrownError) {

            alert(thrownError);
        },
        complete: function() {
            if(time){
                clearTimeout(time);
            }
            time= setTimeout(update_the_map, 10000);
        }
    });

}

这样，只有一个vectorGrid变量，该内容可能在每次update_the_map调用中释放。