有一个js方法loadXMLDoc,在网页上点击按钮的时候触发,循环从某些url里获取到一个值赋值给页面的showstatus对象。
问题:Firefox上一切正常,点击之后页面先20个都显示蓝色的Getting status form url...,然后一条一条根据url的返回值刷新状态;IE/Chrome都会一直卡十几秒,然后一下子20个都刷新到最后的状态;有人知道这是什么原因么?
function loadXMLDoc()
{for (var i=1; i<=20; i++)
{
document.getElementById("showstatus"+i).innerHTML= "<font color='blue'><i>Getting status form url...</i></font>";
}
//alert("have a rest"); //如果此处增加alert,则会先显示蓝色的 Getting status form url...,关闭ale rt之后IE/Chrome会等几秒一下子显示所有状态,Firefox则会一条一条刷新,不会卡几秒。
for (var i=1; i<=20; i++)
{
var url =document.getElementById("url"+i).value;
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("showstatus"+i).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",url,false);
xmlhttp.send();
}
}
false时(同步)"send returns"在"response got"之后. true时则相反.
研究了两天,在js里使用循环很难完成要求,后来使用了递归,出来效果正如需求,没有卡死网页,而且是异步刷新了页面信息。
代码如下:
function loadXMLDoc()
{
for (var i=1; i<=20; i++)
{
document.getElementById("showstatus"+i).innerHTML= "<font color='blue'><i>Getting status from url...</i></font>";
}
al();
}
var i=0;
function al()
{
i++;
if(i<20+1) setTimeout(function(){gethtml(i);al()},100);
}
function gethtml(i){
var url =document.getElementById("url"+i).value;
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("showstatus"+i).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}