Maison >développement back-end >tutoriel php >javascript - ajax异步请求数据,ios屏幕闪动
做一个聊天页面,ajax异步请求数据时,不论有无数据返回,ios都会闪动一下,而android不会闪动 ,这是怎么回事,该如何解决
<code>$(document).ready(function(){ $('.loading_box').attr('style','display:none'); ajaxform(); window.setInterval("ajaxform()",3000); }); function ajaxform(){ var id=$(".main_box ul li:last-child").find('.delete_btn').attr('field');//alert(id); $.post( "{:U('App/Friends/ajaxform')}", {"openid":openid,"id":id}, function(data){ if (data) { var str = "";console.log(data); $.each(data, function(index, array) { if(array['openid']==openid){ if(array['type']==0){ //普通文字或图片 str='<li class="chart-right"> <div class="chart_text_box"> <div class="jieshao"> <p>'+array['uname']+'</p> <p>'+array['time']+'</p> </div> <div class="chart_text_qipao_right"><p>'+array['content']+'</p></div> <div class="operation_box"><div class="delete_btn" field="'+array['id']+'">删除</div></div> </div> <div class="persion_img_right"> <img src="'+array%5B'headimgurl'%5D+'" alt="javascript - ajax异步请求数据,ios屏幕闪动" ><font><img src="%7B%24tpl%7DApp/Friends/Public/img/vipv'+array%5B'classid'%5D+'l.png" alt="javascript - ajax异步请求数据,ios屏幕闪动" ></font> </div> </li>'; }else{ //我的霸屏 str='<li class="chart-right"> <div class="chart_text_box"> <div class="jieshao"> <p>'+array['uname']+'</p> <p>'+array['time']+'</p> </div> <div class="chart_text_qipao_right"><p><i class="money_text">重金霸屏'+arr[array['type']]+'秒</i>'+array['content']; if(array['img']!=""){ str+='<font class="chart_img"><img src="'+array%5B'img'%5D+'" alt="javascript - ajax异步请求数据,ios屏幕闪动" ></font>'; } str+='</p></div> <div class="operation_box"><div class="delete_btn" field="'+array['id']+'">删除</div></div> </div> <div class="persion_img_right"> <img src="'+array%5B'headimgurl'%5D+'" alt="javascript - ajax异步请求数据,ios屏幕闪动" ><font><img src="%7B%24tpl%7DApp/Friends/Public/img/vipv'+array%5B'classid'%5D+'l.png" alt="javascript - ajax异步请求数据,ios屏幕闪动" ></font> </div> </li>'; } }else{ if(array['type']==0){ //普通文字或图片 str = ' <li class="chart-left"> <div class="persion_img_left"> <img src="'+array%5B'headimgurl'%5D+'" alt="javascript - ajax异步请求数据,ios屏幕闪动" ><font><img src="%7B%24tpl%7DApp/Friends/Public/img/vipv'+array%5B'classid'%5D+'l.png" alt="javascript - ajax异步请求数据,ios屏幕闪动" ></font> </div> <div class="chart_text_box"> <div class="jieshao"> <p>'+array['uname']+'</p> <p>'+array['time']+'</p> </div> <div class="chart_text_qipao_left"> <span class="sanjiao_left"></span><p>'+array["content"]+'</p> </div>'; if(isadmin){ str+='<div class="operation_box"> <div class="delete_btn" field="'+array['id']+'">删除</div> <div class="blacklist" field="'+array['openid']+'">拉黑</div> </div>'; } str+='</div> </li>'; }else{ //他人霸屏 str='<li class="chart-left "> <div class="persion_img_left"> <img src="'+array%5B'headimgurl'%5D+'" alt="javascript - ajax异步请求数据,ios屏幕闪动" ><font><img src="%7B%24tpl%7DApp/Friends/Public/img/vipv'+array%5B'classid'%5D+'l.png" alt="javascript - ajax异步请求数据,ios屏幕闪动" ></font> </div> <div class="chart_text_box"> <div class="jieshao"> <p>'+array['uname']+'</p> <p>'+array['time']+'</p> </div> <div class="chart_text_qipao_left"> <span class="sanjiao_left"></span><p><i class="money_text">重金霸屏'+arr[array['type']]+'秒</i>'+array['content']; if(array['img']!=""){ str+='<font class="chart_img"><img src="'+array%5B'img'%5D+'" alt="javascript - ajax异步请求数据,ios屏幕闪动" ></font>'; } str+='</p> </div>'; if(isadmin){ str+='<div class="operation_box"> <div class="delete_btn" field="'+array['id']+'">删除</div> <div class="blacklist" field="'+array['openid']+'">拉黑</div> </div>'; } str+='</div> </li>'; } } $(".main_box ul").append(str); $('.main_box').scrollTop( $('.main_box')[0].scrollHeight ); }); } } ); }</code>
做一个聊天页面,ajax异步请求数据时,不论有无数据返回,ios都会闪动一下,而android不会闪动 ,这是怎么回事,该如何解决
<code>$(document).ready(function(){ $('.loading_box').attr('style','display:none'); ajaxform(); window.setInterval("ajaxform()",3000); }); function ajaxform(){ var id=$(".main_box ul li:last-child").find('.delete_btn').attr('field');//alert(id); $.post( "{:U('App/Friends/ajaxform')}", {"openid":openid,"id":id}, function(data){ if (data) { var str = "";console.log(data); $.each(data, function(index, array) { if(array['openid']==openid){ if(array['type']==0){ //普通文字或图片 str='<li class="chart-right"> <div class="chart_text_box"> <div class="jieshao"> <p>'+array['uname']+'</p> <p>'+array['time']+'</p> </div> <div class="chart_text_qipao_right"><p>'+array['content']+'</p></div> <div class="operation_box"><div class="delete_btn" field="'+array['id']+'">删除</div></div> </div> <div class="persion_img_right"> <img src="'+array%5B'headimgurl'%5D+'" alt="javascript - ajax异步请求数据,ios屏幕闪动" ><font><img src="%7B%24tpl%7DApp/Friends/Public/img/vipv'+array%5B'classid'%5D+'l.png" alt="javascript - ajax异步请求数据,ios屏幕闪动" ></font> </div> </li>'; }else{ //我的霸屏 str='<li class="chart-right"> <div class="chart_text_box"> <div class="jieshao"> <p>'+array['uname']+'</p> <p>'+array['time']+'</p> </div> <div class="chart_text_qipao_right"><p><i class="money_text">重金霸屏'+arr[array['type']]+'秒</i>'+array['content']; if(array['img']!=""){ str+='<font class="chart_img"><img src="'+array%5B'img'%5D+'" alt="javascript - ajax异步请求数据,ios屏幕闪动" ></font>'; } str+='</p></div> <div class="operation_box"><div class="delete_btn" field="'+array['id']+'">删除</div></div> </div> <div class="persion_img_right"> <img src="'+array%5B'headimgurl'%5D+'" alt="javascript - ajax异步请求数据,ios屏幕闪动" ><font><img src="%7B%24tpl%7DApp/Friends/Public/img/vipv'+array%5B'classid'%5D+'l.png" alt="javascript - ajax异步请求数据,ios屏幕闪动" ></font> </div> </li>'; } }else{ if(array['type']==0){ //普通文字或图片 str = ' <li class="chart-left"> <div class="persion_img_left"> <img src="'+array%5B'headimgurl'%5D+'" alt="javascript - ajax异步请求数据,ios屏幕闪动" ><font><img src="%7B%24tpl%7DApp/Friends/Public/img/vipv'+array%5B'classid'%5D+'l.png" alt="javascript - ajax异步请求数据,ios屏幕闪动" ></font> </div> <div class="chart_text_box"> <div class="jieshao"> <p>'+array['uname']+'</p> <p>'+array['time']+'</p> </div> <div class="chart_text_qipao_left"> <span class="sanjiao_left"></span><p>'+array["content"]+'</p> </div>'; if(isadmin){ str+='<div class="operation_box"> <div class="delete_btn" field="'+array['id']+'">删除</div> <div class="blacklist" field="'+array['openid']+'">拉黑</div> </div>'; } str+='</div> </li>'; }else{ //他人霸屏 str='<li class="chart-left "> <div class="persion_img_left"> <img src="'+array%5B'headimgurl'%5D+'" alt="javascript - ajax异步请求数据,ios屏幕闪动" ><font><img src="%7B%24tpl%7DApp/Friends/Public/img/vipv'+array%5B'classid'%5D+'l.png" alt="javascript - ajax异步请求数据,ios屏幕闪动" ></font> </div> <div class="chart_text_box"> <div class="jieshao"> <p>'+array['uname']+'</p> <p>'+array['time']+'</p> </div> <div class="chart_text_qipao_left"> <span class="sanjiao_left"></span><p><i class="money_text">重金霸屏'+arr[array['type']]+'秒</i>'+array['content']; if(array['img']!=""){ str+='<font class="chart_img"><img src="'+array%5B'img'%5D+'" alt="javascript - ajax异步请求数据,ios屏幕闪动" ></font>'; } str+='</p> </div>'; if(isadmin){ str+='<div class="operation_box"> <div class="delete_btn" field="'+array['id']+'">删除</div> <div class="blacklist" field="'+array['openid']+'">拉黑</div> </div>'; } str+='</div> </li>'; } } $(".main_box ul").append(str); $('.main_box').scrollTop( $('.main_box')[0].scrollHeight ); }); } } ); }</code>
闪动是页面刷新了,看是否有重新渲染页面的代码。