これは何のためですか？
インポートなどのために、非常に大きなファイルでスクリプトを処理する必要がある場合があります。 当然、スクリプトの実行時間は、ファイルのサイズまたはファイル内の行数に比例して増加します。
ファイル処理をいくつかの部分に分割し、スクリプトを既に部分で動作するようにしたいと思います。
実装の原則は古くから知られています-サーバーとクライアント間のデータ交換：
クライアントはスクリプトを実行し、いくつかの反復を実行して、停止した行番号をクライアントに返します。 その後、クライアントは新しいリクエストを作成します。このリクエストでは、この番号をスクリプトに渡し、スクリプトはさらに機能し続けます。
実際にはコード自体
仕事には、次のものが必要です。
index.html
<html> <head> <title>ScriptOffset - </title> <script type="text/javascript" src="http://yandex.st/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="scriptoffset.js"></script> <link rel="stylesheet" type="text/css" href="scriptoffset.css"> </head> <body> <div class="form"> <input id="url" name="url"> <input id="offset" name="offset" type="hidden"> <div class="progress" style="display: none;"> <div class="bar" style="width: 0%;"></div> </div> <a href="#" id="runScript" class="btn" data-action="run"></a> <a href="#" id="refreshScript" class="btn" style="display: none;"></a> </div> </body> </html>
scriptoffset.php
<?php // Ajax if ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') {return;} // action . $action = $_POST['action']; if (empty($action)) {return;} $count = 50; $step = 1; // $url = $_POST['url']; if (empty($url)) return; $offset = $_POST['offset']; // , $offset = $offset + $step; if ($offset >= $count) { $sucsess = 1; } else { $sucsess = round($offset / $count, 2); } // ( ) $output = Array('offset' => $offset, 'sucsess' => $sucsess); echo json_encode($output);
scriptoffset.js
function setCookie (url, offset){ var ws=new Date(); if (!offset && !url) { ws.setMinutes(10-ws.getMinutes()); } else { ws.setMinutes(10+ws.getMinutes()); } document.cookie="scriptOffsetUrl="+url+";expires="+ws.toGMTString(); document.cookie="scriptOffsetOffset="+offset+";expires="+ws.toGMTString(); } function getCookie(name) { var cookie = " " + document.cookie; var search = " " + name + "="; var setStr = null; var offset = 0; var end = 0; if (cookie.length > 0) { offset = cookie.indexOf(search); if (offset != -1) { offset += search.length; end = cookie.indexOf(";", offset) if (end == -1) { end = cookie.length; } setStr = unescape(cookie.substring(offset, end)); } } return(setStr); } function showProcess (url, sucsess, offset, action) { $('#url, #refreshScript').hide(); $('.progress').show(); $('#runScript').text('!'); $('.bar').text(url); $('.bar').css('width', sucsess * 100 + '%'); setCookie(url, offset); $('#runScript').click(function(){ document.location.href=document.location.href }); scriptOffset(url, offset, action); } function scriptOffset (url, offset, action) { $.ajax({ url: "http://bfmn.ru/scriptoffset/scriptoffset.php", type: "POST", data: { "action":action , "url":url , "offset":offset }, success: function(data){ data = $.parseJSON(data); if(data.sucsess < 1) { showProcess(url, data.sucsess, data.offset, action); } else { setCookie(); $('.bar').css('width','100%'); $('.bar').text('OK'); $('#runScript').text(''); } } }); } $(document).ready(function() { var url = getCookie("scriptOffsetUrl"); var offset = getCookie("scriptOffsetOffset"); if (url && url != 'undefined') { $('#refreshScript').show(); $('#runScript').text(''); $('#url').val(url); $('#offset').val(offset); } $('#runScript').click(function() { var action = $('#runScript').data('action'); var offset = $('#offset').val(); var url = $('#url').val(); if ($('#url').val() != getCookie("scriptOffsetUrl")) { setCookie(); scriptOffset(url, 0, action); } else { scriptOffset(url, offset, action); } return false; }); $('#refreshScript').click(function() { var action = $('#runScript').data('action'); var url = $('#url').val(); setCookie(); scriptOffset(url, 0, action); return false; }); });
scriptoffset.css
input { font-size: 13px; margin: 0; padding: 0 3px; vertical-align: middle; border: 1px solid #CCCCCC; border-radius: 3px 3px 3px 3px; color: #808080; display: inline-block; font-size: 13px; height: 26px; line-height: 18px; width: 243px; -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; } .btn { font-size: 13px; padding: 5px 8px; background-color: #0064CD; background-image: -moz-linear-gradient(center top , #049CDB, #0064CD); background-repeat: repeat-x; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); color: #FFFFFF; display: inline-block; vertical-align: middle; border-radius: 3px 3px 3px 3px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-decoration: none; } .btn:hover { background-position: 0 -15px; } .btn:active { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset, 0 1px 2px rgba(0, 0, 0, 0.05); } .progress { font-size: 13px; margin: 0; vertical-align: middle; background-color: #F7F7F7; background-image: -moz-linear-gradient(center top , #F5F5F5, #F9F9F9); background-repeat: repeat-x; border-radius: 4px 4px 4px 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; height: 28px; width: 250px; overflow: hidden; display: inline-block; } .progress .bar { background-color: #0E90D2; background-image: -moz-linear-gradient(center top , #149BDF, #0480BE); background-size: 40px 40px; -moz-box-sizing: border-box; -moz-transition: width 0.6s ease 0s; background-repeat: repeat-x; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset; color: #FFFFFF; float: left; font-size: 12px; height: 100%; text-align: left; padding: 5px 8px; font-size: 13px; text-shadow: 1px 1px #333; white-space: nowrap; } div.form { margin: 150px auto 0; width: 500px; }
登録のために、cssはBootstrapからいくつかのルールを取りました。
結果は何ですか
urlフィールドでは、たとえば、処理するファイルへのリンクを示し、スクリプトを実行します。 進行状況バーが表示されます。作業の結果を確認するために、進行状況バーが100％になるまで待機します。
このソリューションを使用する場合：
- （スクリプト自体で）反復ごとに処理される行の数を設定できます。
- ユーザーには、無限の「ねじれ」ではなく、実際の進行状況バーが表示されます。進行状況バーが中央にある場合、ファイルの半分が処理されています。
- ユーザーはスクリプトの実行を停止できます。 この場合、オフセットは同じ場所からスクリプトを実行し続けることができるように10分間Cookieに書き込まれます。
- ユーザーがページを更新すると、ストップポイントからスクリプトを続行するか、最初からやり直すように求められます（Cookieにも感謝します）。
コミュニティにこのような機能の実装例や、スクリプトを使用した段階的な作業のための既製のソリューションが実装されている場合は、コメント内のリンクに感謝します。
UPD。 MODXに適合したソリューションはこちらです。