javascript的动态添加function问题!!!高手进@@@@@@
我现有一段程序如下:
for (i = 0; i < visibleTiles.length; i++) {
var tileArray = visibleTiles[i];
var tileName = tileArray[1] + "_ " + tileArray[0];
visibleTilesMap[tileName] = true;
var img = document.getElementById(tileName);
if (!img) {
img = document.createElement( "img ");
img.src= "../i/ "+ tileName+ ".gif ";
img.style.position = "absolute ";
img.style.left = (tileArray[0] * tileSize) + "px ";
img.style.top = (tileArray[1] * tileSize) + "px ";
img.style.zIndex = 0;
img.setAttribute( "id ", tileName);
img.onclick=function(){maptitle(this);}
img.onmouseover=function(){isDelay=setTimeout(mapover(this),2000);}
img.onmouseout=function(){clearTimeout(isDelay);}
innerDiv.appendChild(img);
}
}
这段代码是模仿google map进行地图浏览的一段,生成了很多img对象。
我想加一个功能,就是当用户把鼠标放在图片上时,用ajax取数据库信息显示出来,可是当用户鼠标在图片上不停来回移动时,会发送大量的请求,我想做一个延时,两秒以内的鼠标如果停在一个图片上时,就发送一个请求。否则不请求。
结果我在试两个图片时操作正常,可是在这里就不行了,我想是因为isDelay是一个变量,无法应对多个图片,这段代码请高手讲讲该怎么改?
------解决方案--------------------for (i = 0; i < visibleTiles.length; i++) {
var tileArray = visibleTiles[i];
var tileName = tileArray[1] + "_ " + tileArray[0];
visibleTilesMap[tileName] = true;
var img = document.getElementById(tileName);
if (!img) {
img = document.createElement( "img ");
img.src= "../i/ "+ tileName+ ".gif ";
img.style.position = "absolute ";
img.style.left = (tileArray[0] * tileSize) + "px ";
img.style.top = (tileArray[1] * tileSize) + "px ";
img.style.zIndex = 0;
img.setAttribute( "id ", tileName);
img.onclick = function () {
maptitle(this);
}
(function () {
var isDelay;
img.onmouseover = function () {
isDelay=setTimeout(mapover(this),2000);
}
img.onmouseout = function () {
clearTimeout(isDelay);
}
})();
innerDiv.appendChild(img);
}
}