數據切片操做

時間 2019-11-10

標籤數據切片简体版

原文原文鏈接

當須要操做的數據量過大，須要切片處理
場景：文件上傳，處理數據量大，php處理超時，前端等待時間過長

// 新建data.php
<?php
$page = $_POST['page'] ?? 1;
$size= $_POST['size'] ?? 100;

$totalNum = 500;
$list = "";

for($i= ($page-1) * $size; $i < $page * $size; $i++){
    $list .= $i .", "; 
}
$list = $list ."<hr />";

$status = false;

if( $page*$size <= $totalNum ){
    $status = true;
}
$page = $page + 1;
sleep(1);
// echo "<pre>";
// print_r($list);
// echo "</pre>";exit;

$res = [
    'status'=> $status,
    'page'  => $page,
    'list'  => $list,
];
echo json_encode($res);

前端遞歸調用，後端給跳出條件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>數據切片操做</h2>
    <button id="btn">開始執行</button>
    <p class="progress"></p>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script>
    function getData($page=1){
        $.post("./data.php",{
            page: $page,
            size:100,
        },
        function(data){
            data = eval("("+data+")");
            if(data.status){
                // console.log( data.page );
                // console.log( data.list );
                $(".progress").append(data.list);
                getData(data.page);
            }else{
                $(".progress").append("\n"+"done");
            }
        });
    }
    $( "#btn" ).on( "click", function() {
        // console.log( $( this ).text() );
        $(".progress").text("Data: ")
        getData()
    });
        
    </script>
</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。