javascript逐行显示数据及php实时输出前端内容后台保持继续运行的解决方案(setTimeout定时器、flush和ob_flush函数、安装进度展示)

简介: javascript逐行显示数据及php实时输出前端内容后台保持继续运行的解决方案(setTimeout定时器、flush和ob_flush函数、安装进度展示)

在数据可视化大屏显示的过程中,需要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运行时间过长会自动停止运行;

@漏刻有时

相关文章
|
4月前
|
存储 监控 安全
前端框架的数据驱动方式如何保证数据的安全性?
总之,前端框架的数据驱动方式需要综合运用多种手段来保证数据的安全性。从传输、存储、访问控制到防范攻击等各个方面进行全面考虑和实施,以确保用户数据的安全可靠。同时,不断加强安全管理和技术创新,以应对不断变化的安全挑战。
155 60
|
11天前
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
43 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
1月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
165 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
4月前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
61 2
2024年5月node.js安装(winmac系统)保姆级教程
|
5月前
|
JSON 前端开发 Java
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
文章介绍了Java后端如何使用Spring Boot框架响应不同格式的数据给前端,包括返回静态页面、数据、HTML代码片段、JSON对象、设置状态码和响应的Header。
222 1
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
|
4月前
|
存储 JavaScript 前端开发
decimal.js库的安装和使用方法
【10月更文挑战第24天】decimal.js 是一个非常实用的高精度计算库,通过合理的安装和使用,可以在 JavaScript 中实现精确的数值计算和处理。你可以根据具体的需求和项目情况,灵活运用该库来解决数字精度丢失的问题。
|
4月前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
73 1
|
5月前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
|
5月前
|
JSON 分布式计算 前端开发
前端的全栈之路Meteor篇(七):轻量的NoSql分布式数据协议同步协议DDP深度剖析
本文深入探讨了DDP(Distributed Data Protocol)协议,这是一种在Meteor框架中广泛使用的发布/订阅协议,支持实时数据同步。文章详细介绍了DDP的主要特点、消息类型、协议流程及其在Meteor中的应用,包括实时数据同步、用户界面响应、分布式计算、多客户端协作和离线支持等。通过学习DDP,开发者可以构建响应迅速、适应性强的现代Web应用。
107 2
|
5月前
|
JavaScript Java PHP
快速对比:Django、Spring Boot、Node.js 和 PHP
快速对比:Django、Spring Boot、Node.js 和 PHP
188 7

热门文章

最新文章