日期:2014-05-16  浏览次数:20330 次

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);
}
}