如何使用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

您不能製作異步功能塊。

您嘗試阻止所有內容，包括您正在等待的異步功能的回調。

如果您想在異步函數完成後執行某些操作，請將該函數放入函數中並將其用作回調函數。