関数をブロックし、他のタスクがJavaScriptで終了するのを待ちます。

Question

私は自分のJavascript関数（クラス）を持っています。

私は非同期タスクに問題が発生しました.JSはそれを管理することができないためです。

私のコードは次のようになります。

function imageEditor(canvas, image, options) { 
    var that = this; 

    this.getImageData = function (format, encoderOptions) { 
     var animState = that._waitAnim.isOn; //saving animation state 

     that.waitingAnimation(false); //turning off animation 
     while (that._waitAnim.isRunning) { imgEdit.waitingAnimation(false); } //waiting for wait animation to finish rendering it's image (this locks JS) 

     that._canvasRedraw(); //performing our canvas redraw 
     var imgData = that._canvas.toDataURL(format, encoderOptions); 

     that.waitingAnimation(true); //turning on animation again 

     return imgData; 
    }; 

    this.waitingAnimation = function (startStop) { 
     if (typeof startStop === 'boolean') { 
      if (startStop && that._waitAnim.isRunning) 
       return; 

      that._waitAnim.isOn = startStop; 

      if (startStop) { 
       that._waitAnim.isRunning = true; 
       window.requestAnimationFrame(that._waitingAnimation); 
      } 
     } 

     return that; 
    }; 

    this._canvasRedraw = function() { 
     //performing image redrawing on canvas (not a waiting indicator) 
    }; 

    this._waitingAnimation = function() { 
     //performing waiting indicator drawing 

     if (!that._waitAnim.isOn || !that._waitAnim.isRunning) { //it's time to finish our animation 
      that._waitAnim.isOn = false; 
      that._waitAnim.isRunning = false; 
      that._canvasRedraw(); 
      return; 
     } 

     window.requestAnimationFrame(that._waitingAnimation); //schedule next indicator redraw 
    }; 
} 

問題は、この行が全体のJavascriptをブロックしていることである。

while (that._waitAnim.isRunning) { imgEdit.waitingAnimation(false); } 

私はインジケータがそれのタスクを完了するために再描画を待ちたかったし、私を描くよりも、キャンバス上のイメージ、DataURLへのエクスポート、リストアインジケータ、DataURLをユーザーに返します。

コード全体を変更せずにこれを行う方法はありますか？

Answer 1

非同期機能をブロックすることはできません。

あなたの試行は、あなたが待っている非同期機能のコールバックを含むすべてをブロックします。

非同期関数の終了後に何かしたい場合は、その関数を関数に入れてコールバックとして使用します。