Question

我正在制作一个包含一些数据的传单地图。总的来说，我会在任何时间点在地图上的0到18000个标记点之间。

了解我想要实现的目标的必要代码：

var ds = L.markerClusterGroup({
                                disableClusteringAtZoom: 9,
                                maxClusterRadius: 120,
                                chunkedLoading: true,
                                iconCreateFunction: iconCreate
                            });

window.onload = function(){
    map = L.map('map', {
        layers: [baseLayer, ds],
        worldCopyJump: true,
        minZoom: 3,
        inertiaMaxSpeed: 300
    }).setView([lat, lng], zoom);

    callAjax("/ajax/markers1.php", markers); // 4220 rows

    // callAjax("/ajax/markers2.php", markers); // ~14000 rows
}

function callAjax(url, cb, options){
    var xhttp = new XMLHttpRequest(),
        opts  = options || {};


    xhttp.onreadystatechange = function(){
        ajaxCheck(xhttp, cb, opts);
    }

    xhttp.open("POST", url, true);
    xhttp.send();
}

function markers(xhttp){                    
    var dJson = JSON.parse(xhttp.responseText);

    for(var d = 0;d < dJson.length;d++){
        addMarker(dJson[d]);
    }
}

function addMarker(d){                
    L.marker([d.lat, d.lng], {
                id: d.id
            })
     .addTo(ds);
}

上面的代码从指定的URL获取JSON请求，并循环返回以将标记添加到已绑定到地图的群集组。在Chrome 49.0.2623.112 m中，第一个AJAX响应在8秒后返回，另外3到5秒加载所有标记。

在IE 11中，我得到了长时间运行的脚本。第一个标记运行中有4220条记录。我限制循环只运行100次，它仍然可以运行很长的脚本。使它只输出1个标记有效，但我需要所有4220（以及之后的14000）。

我找到了发布“长时间运行的脚本”的不同地方，但每个地方都说“让你的代码更好”。对于我试图完成我的代码的任务感觉是完美的。

在控制IE时我缺少什么，以便此代码可以成功运行并最终在此地图上添加所有18000多个标记？

Answer 1

这个问题有几个因素可以发挥作用。第一个是Leaflet不是主要问题，而是重复（看似）不必要的代码。

IE可以在决定失败之前运行大约500万行Javascript（未经编辑的设置）。这个逻辑的一个缺陷是，即使脚本之间有一段等待时间，它似乎也可以节省运行的行数。重置此数字（严厉）的唯一方法是setTimeout。这是一个完整的警察。如果你必须这样做，不要感到沮丧，但如果你有多次循环的脚本需要它在IE中工作，那么你很可能需要添加一个setTimeout。

我确实找到了超时时间的建议，但50ms似乎没问题。其他建议不是将其设置为浏览器中的默认时间就足够了。但是，有些浏览器设置为400毫秒，这几乎是半秒......这对我来说似乎不合理。所以它是50ms。到目前为止没有问题。

我想＆＃34;让你的代码变得更好＆＃34;这一切都是真的。或者只是摆脱IE。只是说。

Answer 2

使用profiling tools in your web browser查看一直在吃什么。

在您的情况下，我打赌它会在addEventListener上拨打dblclick - 换句话说，Leaflet bug 3972和Leaflet bug 4357，简短的回答是“升级从Leaflet 0.7.x到Leaflet 1.0.0-beta“。

如何修复长时间运行的脚本？

2 个答案: