0

同期のタスクと非同期のタスクがあります。それらは混在していますが、すべて順番に実行したいと考えています。

同期タスクの下にある画像:初期化、開始、ファイナライズ、終了、およびタスク非同期の下:タスク1、タスク2

初期化、開始、タスク1、タスク2、ファイナライズ、終了の順序で実行したい

では、$.queue() を使用する方法は? 私の実装の下にありますが、機能しません。

タスクのコードの下:

初期化、初期化、最終化、および終了は、メッセージをコンソール ログと div 項目に出力するだけなので、「ばかげた」関数です。

function initialize(next) {

 // Here initialization stuff is done just before starting the entire process: things that are required later during the process
     console.log('Initiating process...');
     postStatus('</br>Initiating process...');

     next();
 }

 function initiate(next) {
     // Here enable/disable buttons are done
     setButtonDisabled(true);


     console.log('Process started.');
     postStatus('Process started <br/>');

     next();
 }


 function finalize(next) {
 // Here things required to be done just before terminating the entire process should be done.
 // Free resources, etc.
       console.log('Finishing process...');
       postStatus('<br/>Finishing process...');

       next();
 }

 function terminate(next) {
 // Here things that need to be done when the entire process finished.
 // Simple things such as those related to UI.
      setButtonDisabled(false);

      console.log('Process terminated.');
      postStatus('<br/>Process terminated.');

      next();
 }

残り:

 function core(urlGetData, urlDoTask) {

 getTasks(urlGetData).then(function (response) {
            console.log("Response from getTasks: " + response);
             postResponse(response, "Received GetData results" + JSON.stringify(response));
            if ("fail" === response.status) {
               return fail(response);
            }

            console.log(response);
            return doTasks(response.data, urlDoTask);
      }).then(function () {
            postStatus("Received DoTask results");

            var results = arguments;
            console.log(results);
            for (var i = 0; i < results.length; i++) {
               postResponse(results[i], 'done ' + JSON.stringify(results[i]));
            }
      }).fail(function (err) {
            postStatus("Error: " + JSON.stringify(err));
      });
 }

 function Task1(next) { 
         if ($('#Task1').is(':checked')) {
             core("/MyController/GetDataTask1/", "/MyController/DoTask1/");
         }

         next();
 }

 function Task2(next) {    
   if ($('#Task2').is(':checked')) {
         core("/MyController/GetDataTask2/", "/MyController/DoTask2/");
   }

   next();
 }

ボタンをクリックすると、次のようになります。

  $({}).queue(initialize)
       .queue(initiate)
       .queue(Task1)
       .queue(Task2)
       .queue(finalize)
       .queue(terminate);

しかし、コンソールでは次の順序で出力されるため、それらは順番に実行されていないようです。

  1. 初期化のメッセージ
  2. 開始のメッセージ
  3. Task1 のメッセージ
  4. Task2 のメッセージ
  5. ファイナライズのメッセージ
  6. 終了のメッセージ
  7. task1 の進行状況メッセージを表示します
  8. task2 の進行状況メッセージを表示します
  9. task2 の進行状況メッセージを表示します
    1. など... task1 と task2 の進行状況メッセージを混在させる

task1 と task2 は非同期であるため....これを解決するにはどうすればよいですか? ノンブロッキング ソリューションが必要です。

出力は次のようになります。

  1. 初期化のメッセージ
  2. 開始のメッセージ
  3. タスク 1 の実行 タスク 1 の進行状況メッセージを表示 タスク 1 の実行を終了
  4. タスク 2 のメッセージ タスク 2 の進行状況メッセージを表示します タスク 2 の実行を終了します
  5. ファイナライズのメッセージ
  6. 終了のメッセージ

それらすべて (initialize、initialize、task1、task2、finalize、terminate) をこの順序で実行するためにキューに入れる方法は? どのコードも高く評価されます....

jQuery 10.1.2 を使用しています

4

1 に答える 1