程序崩溃后地图更新

Question

我是Web开发和开发程序的初学者，在该程序中我使用传单来更新Ajax呼叫，并且效果很好。更新地图如下：

 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成功函数呼叫中重新定义，并且是一个呼叫的本地。这也可能是内存泄漏的原因。垃圾收集器可能认为此局部变量永远不会没有用，因此它不能"免费"内存。

这是您可以尝试的：

// 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呼叫可能会释放内容。