地图更新后程序崩溃

Question

我是网络开发的初学者，我正在开发一个程序，我通过 ajax 调用使用传单更新地图并且它有效 fine.Now 我每 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>

但这在一段时间内工作正常然后错误显示浏览器没有 memory.So 当我查看同样的错误时我认为它应该是超时功能有问题。但无法准确找到错误所在 occurs.Any 帮助表示感谢。

Answer 1

阅读您的代码后。浏览器可以运行内存不足的唯一原因似乎是 L.vectorGrid.slicer.

的实例化

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

这可能还不够，但您可以在 vectorGrid.remove(); 之后这样做：

delete vectorGrid;

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

更新：

我刚刚注意到您的 vectorGrid 变量在每个 ajax 成功函数调用中都被重新声明，并且是一个调用的本地变量。这也可能是内存泄漏的原因。垃圾收集器可能认为这个局部变量永远不会无用，所以它不会 "free" 内存。

以下是您可以尝试的方法：

// 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 调用时可能释放其内容。

地图更新后程序崩溃

Program Crashing after map update

javascript

leaflet

mapbox