Fonksiyon nasıl engellenir ve diğer görevlerin tamamlanması için Javascript

Question

Tuval üzerinde bazı çizimler yaptığım kendi Javascript işlevim (sınıf) var.

Geliştirmenin bir noktasında, eşzamansız görevlerle ilgili bir sorunla karşılaştım, çünkü JS herhangi bir yönetim türüne izin vermeyecektir.

Benim kod şöyle görünür:

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 
    }; 
} 

sorunu bu hat engelliyor bütün JavaScript: Ben kendi görev bitirmek için yeniden çizim göstergesi bekleyin ve daha çizmek istedim

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

benim tuvalde görüntü, DataURL'a aktar, göstergeyi geri yükle ve DataURL'u kullanıcıya döndür.

Tüm kodu değiştirmeden bunu yapmanın herhangi bir yolu var mı?

Answer 1

Asenkron işlevler engelini kaldıramazsınız.

Denemeniz, beklediğiniz eşzamansız işlevin geri çağrılması dahil olmak üzere her şeyi engeller.

Eşzamansız bir işlev tamamlandıktan sonra bir şeyler yapmak istiyorsanız, bunu bir işleve koyun ve geri arama olarak kullanın.