下载文件会阻止 Javascript 事件？

Question

我正在创建一个带有内置 WebBrowser 控件的 .Net 库。该库通常应该在其他应用程序中处理谷歌地图。基本上所有基本的 Google 地图 API 事件都会发送到我的 C# 库，以便使用它传递给应用程序。

一切都很好，直到使用我的库的应用程序想要在单击时更改标记图标并在双击时执行不同的操作。在这种情况下，应用程序在 C# 级别更改标记图标，然后调用 Javascript 函数来更改地图上的图标：

function SetMarkerIcon(id, imageUri) {
    markers[id].setIcon(imageUri);
 }

我对问题进行了调试，得出的结论是 Javascript 会冻结，直到下载图像文件并且对第二次单击无响应，这应该会触发 dblclick 事件。所以我的第一个问题是这是否是正确的思维方式。

基于这个假设，我尝试使用setTimeout 来稍微延迟下载文件：

function SetMarkerIcon(id, imageUri) {
    setTimeout(function () { markers[id].setIcon(imageUri); }, 200);
 }

但显然这个解决方案非常“肮脏”（虽然在测试环境中有效，但实际上它在使用本地 .js 文件时甚至可以延迟 0ms，可能是因为setTimeout 使用了一种单独的线程，但不是服务器上的脚本），因此第二个问题：您有任何有用的想法如何正确解决此错误？

对不起，如果问题有点含糊。

Answer 1

您可以使用精灵非常快速地切换标记的图标。您将所有图标作为精灵存储在常规网格位置的一个文件中。您只需将此文件加载到浏览器中一次。您可以通过更改精灵的原点来切换图标。这是一个原型实现：

var pos = new google.maps.LatLng(0, 0);
var url = "/.../sprites.png";             // file with all icons as sprites
var size = new google.maps.Size(24, 24);  // size of 1 sprite
var origin = new google.maps.Point(0, 0);
var anchorPos = new google.maps.Point(12, 12);
var icon = new google.maps.MarkerImage(url, size, origin, anchorPos);
var marker = new google.maps.Marker({       
    position: new google.maps.LatLng(0, 0),       
    map: map,     
    icon: icon
}); 

marker.getIcon().origin = new google.maps.Point(5 * 24, 0);  // set the icon to the 5'th sprite