在数据可视化大屏显示的过程中，需要ajax读取后台数据，然后在前端显示出来。一般来说，异步加载后，遍历循环输出，数据正常情况下会一下子全部展示出来，能不能将返回的数据逐行输出呢？
在php后台安装程序过程或者数据库备份时，基于php的运行特点，是执行完全部代码后才予以输入内容。能否在后台运行的同时又让前端显示内容，避免用户不知道等待多少时间带来的无助感呢？
一、前端Ajax展示的解决方案
HTML容器
<div class="text-box" id="text-box"> <div class="license" id="license"></div> </div>
js数组静态模拟数据
for (var i = 0; i < 1000; i++) { (function (t) {//形参 setTimeout(function () { // console.log(`这是第 ${t} 次`); $("#license").append(t + " 账号创建成功...<br/>"); }, 500 * t);// 执行一次的时间间隔，非累加 })(i) //注意实参，将要用的参数传进去 }
演示效果
二、php实时输出前端内容的解决方案
案例采用Discuz!安装进度的经典案例作为分析。
构建HTML容器
<div class="text-box" id="text-box"> <div class="license" id="license"></div> </div>
showMessage(message)封装函数
function showMessage(message) { document.getElementById('license').innerHTML += message + "<br/>"; document.getElementById("text-box").scrollTop = 500 + scroll_height; scroll_height += 100; }
PHP后台数据模拟
set_time_limit(0); //设置运行时间 echo str_repeat(" ",4096);//随便输出一段代码当即输出 showjsmessage('数据表 ... 创建成功'); for ($i = 0; $i < 100; $i++) { showJSMessage($i); } //抛出JS信息 function showJSMessage($message) { echo '<script type="text/javascript">showMessage(\'' . addslashes($message) . '\');</script>' . ""; flush(); ob_flush(); }
常见问题说明
php采用showMessage(message)的方式，并没有出现向ajax显示一样的逐行显示动画；
采用网上通用的增加sleep(1)函数，不管是在windows系统还是linux系统，只是延迟了显示时间，也未出现逐行展示的动画效果；
因此，案例仍按Discuz!的经典写法只使用flush()和ob_flush()函数作为强制输出缓冲的方法；
set_time_limit(0); 一定要设置运行时间，否则，php运行时间过长会自动停止运行；
@漏刻有时
