如何在Javascript中阻止功能并等待其他任务完成

Question

I have my own Javascript function (class) in which I do some drawings on canvas.

At one point of developing I got a problem with async tasks, because JS won't allow for any type of managing it.

My code looks like this:

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

The problem is that this line is blocking whole Javascript:

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

I wanted to wait for indicator redraw to finish it's task and than draw my image on canvas, export to DataURL, than restore indicator, and return DataURL to user.

Is there any possible way to do this without changing whole code?

Answer 1

You can't make asynchronous functions block.

Your attempt blocks everything, including the callback of the asynchronous function that you are waiting for.

If you want to do something after an asynchronous function finishes, then put that something in a function and use it as a callback.