Chrome,IE和Firefox通过JS循环使用innerhtml赋值时候的处理差异?

阿采 发布于 2015/12/01 14:09
阅读 700
收藏 0

有一个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();

    }
}

以下是问题补充:

@阿采:xmlhttp.open("GET",url,false); 改成 xmlhttp.open("GET",url, true);之后,点击按钮页面只显示蓝色的getting status from ...,在第二个循环里url赋值后加了alert,以及onreadystatechange的function里也加了alert,前面的alert可以全部显示,但是第二个只显示了少数几个,而且最后赋值也不生效;也就是最后网页上一直显示的是蓝色的getting status from ... (2015/12/01 16:35)
加载中
0
wuyiw
wuyiw
该评论暂时无法显示,详情咨询 QQ 群:点此入群
阿采
阿采
回复 @wuyiw : thanks still. 后来我改变了一下循环,加了setTimeout做递归,基本上解决了问题。
wuyiw
wuyiw
回复 @阿采 : 没有, 只是简单测试一下true/false时send是否会阻塞, 见下
阿采
阿采
回复 @wuyiw : 你测试过程中有给页面一系列对象数据动态赋值么?是通过什么来获取这一系列对象的?
阿采
阿采
回复 @wuyiw : 找到原因了,是这句 document.getElementById("showstatus"+i).innerHTML=xmlhttp.responseText;,里面的i在第一次执行到的时候已经是21了。
wuyiw
wuyiw
回复 @阿采 : 可以用firebug看看网络请求发送情况.
下一页
0
梦想岛
梦想岛
擦,为何不用jQuery的ajax
0
zigzagroad
zigzagroad
这明显是业务设计问题:能一次就完成数据的请求,为什么要分20次?
zigzagroad
zigzagroad
哦,目标服务器不同,不能一次性操作获取数据
阿采
阿采
因为是分20次去不同的url获取数据的,每一次耗时大概2秒,如果同步一次性操作会要等待20秒左右才有反应
0
wuyiw
wuyiw

false时(同步)"send returns"在"response got"之后. true时则相反.

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {  
	if (xmlhttp.readyState==4 && xmlhttp.status==200) {
		console.log('response got, length: ', xmlhttp.responseText.length);
	}
}
xmlhttp.open("GET",'http://www.oschina.net/', false);
xmlhttp.send();
console.log('send returns');



0
阿采
阿采

研究了两天,在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();
}

OSCHINA
登录后可查看更多优质内容
返回顶部
顶部