javascript - AJAX 刷新、setInterval 计时和本地主机崩溃

Question

我正在使用 Django、Leaflet、OSM 和 jQuery 开发一个应用程序。该应用程序显示带有标记的 map 和包含所有标记数据(时间、纬度、经度)的表格。

我想在不重新加载整个页面的情况下自动更新表格和 map 标记(我基本上想消除 map 瓦片图层的 flickr，并且数据库不断被 model.py 中的一些随机生成的数据更新) , 但我遇到了以下问题。

1. 当我使用 refresh() 时只在 table 上，不知何故我的整个包装器 div 递归地嵌入到我的表 div 中，并且所有内容( map 和表格)都会刷新。

2. 我写了一个 updateMarker() 函数来更新我的标记，但它似乎不起作用。

3. 我的 setInterval 时间间隔为 5 秒，但 div 实际上并不是每 5 秒刷新一次。更像是每 1/2 秒或太快的速度。

4. 由于我的应用连接到 OSM 以获取 map 图 block ，所有这些“GET”查询是否有可能耗尽我的带宽？让程序运行一段时间后，我意识到我无法再加载谷歌，而且 wifi 仍然很好。过了一会儿，localhost 开始疯狂崩溃。我重新启动了我的计算机两次并检查了互联网设置 5 次，当我启用了与 map 相关的脚本时，localhost 仍然崩溃。然而，当我注释掉代码的 map 部分时，我的本地主机在大多数情况下似乎都很好，只是有点不稳定，问题 #3 仍然存在。

5. 编辑:添加到 #4，每次我现在启动 runserver(使用 map相关代码)，终端输出卡在 [14/Aug/2013
03:42:01] "GET /static/js/jquery-1.10.2.min.map HTTP/1.1" 404 1744和本地主机只是去哇，快照。 :(

   更多编辑:它自己修复了？？!我什么都没做……

EDITED 刷新 AJAX 代码:

function refresh() {
    $.ajax({
        url: '/#table',
        success: function(data) {
            $('#result').html(data); //adding an extra #result div to wrap #table
            setInterval(refresh, 5000); //actually setting the refresh rate to 5s...
        }
    });
}

setInterval(refresh, 5000);

已编辑 updateMarkers在我的 .js 文件中，

// group markers to a layer and add the layer to map
function updateMarkers(LatLngArray) {

    // if (myLayer){
    //  map.removeLayer(myLayer);
    // }
    $.ajax({
        url:'/#map',
        success: function(){
            for (i=1;i<=LatLngArray.length;i++) {
                myIcon = L.icon({iconUrl: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+i+'|666699|FFFFFF'});
                layArray.push(L.marker([LatLngArray[i].lat, LatLngArray[i].lng], {icon: myIcon}).bindPopup('<center><br>[LatLngArray[i].lat, LatLngArray[i].lng}}]</center>'));
            }
            myLayer = L.layerGroup(layArray);
            map.addLayer(myLayer);
        }
    });
}

另一个有点相关的问题，我关注了OSM's Leaflet Guide尝试设置“用户平移时显示标记”功能，但它不起作用。当我在 map 上平移时，比如说从美国开始向东移动直到我再次看到美国，我从另一边在美国的所有标记都不再可见。我真的只是复制了代码。 initmap()里面函数看起来像这样:

function initmap() {
    // create the tile layer with correct attribution
    var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmAttrib='Map data © OpenStreetMap contributors';
    var osm = new L.TileLayer(osmUrl, {minZoom: 2, maxZoom: 15, attribution: osmAttrib});       

    // start the map centering around the mediterrean
    map = new L.Map('map', {
        center: new L.LatLng(37.16, 18.87),
        zoom: 2,
        layers: [osm]
    });

    askForPlots();
    map.on('moveend', onMapMove);
}

抱歉发了这么长的帖子...我现在真的不能做太多，因为我的 chrome 仍然显示 Aw，Snap!

Answer 1

O.o 这么长的帖子

让我们从 当我只在表格 div 上使用 refresh() 时开始......

您确定使用您的 ajax 函数吗？我宁愿做这样的事情:

function refresh() {
    $.ajax({
        url: '/ #table', // this should grab only #table element...
        success: function(data) {
            // ...and it will insert it inside #result element
            $('#result').html(data); 
            setTimeout(refresh, 5000);
        }
    });
}

setTimeout(refresh, 5000);

html结构更新:

<div id="result">
    <div id="table">
        ...