Rumah  >  Artikel  >  pembangunan bahagian belakang  >  javascript - ajax异步请求数据,ios屏幕闪动

javascript - ajax异步请求数据,ios屏幕闪动

WBOY
WBOYasal
2016-12-01 01:27:501137semak imbas

做一个聊天页面,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>

闪动是页面刷新了,看是否有重新渲染页面的代码。

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn