前端显示后台处理进度

2019-05-20 13:12:47
2846 阅读
3 评论

后台处理数据时，还在让用户进行未知数的等待吗？试试下面的方法吧

前端显示后台处理进度,zblog,php,第1张

原理就是利用flush这类函数将缓冲数据实时发送到浏览器上，相比ajax后台轮询，极大的提高后台执行效率，减少服务器资源的消耗。

<?php
require '../../../zb_system/function/c_system_base.php';  
ob_end_clean();

echo '<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <script src='.$zbp->host.'zb_system/script/jquery-2.2.4.min.js type="text/javascript"></script>
        <style>
            div{height:50px;width:300px;border:solid 1px #f60;overflow: hidden;}
            div div{width:0;background:#f60;text-align: center;line-height: 50px;color: white;}
        </style>
    </head>
    
    <body>
        进度条：<div><div></div></div>
        正在处理：<span></span>
    </body>
</html>';

$res = $zbp->GetArticleList();

foreach ($res as $k => $value) {
    $p = (int)(++$k / count($res) * 100);
    echo "<script>$('span').text('ID：$value->ID $value->Title');$('div div').css('width','{$p}%').text('{$p}%')</script>";
    //$value->Content = '444';
    //$value->Save();
    ob_flush();
    flush();
    usleep(50000); //单位：微秒
}

之前写个图片SEO的插件，里面有个功能是批量处理文章，前台可以实时显示正在处理的文章。但是用的是ajax浏览器反复的往后端请求的方法，不过这种方法不仅效率低，而且频繁的请求容易被后台的安全系统拦截。