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();之后执行此操作：

delete vectorGrid;

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

更新：

我刚注意到你的vectorGrid变量在每个ajax成功函数调用中被重新声明，并且是一次调用的本地变量。这也可能是内存泄漏的原因。垃圾收集器可能会认为这个局部变量从来没有用过，所以它没有＆＃34; free＆＃34;记忆。

以下是您可以尝试的内容：

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

程序在地图更新后崩溃

1 个答案: