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

如何在Javascript中阻止函数并等待其他任务完成,javascript,asynchronous,canvas,while-loop,Javascript,Asynchronous,Canvas,While Loop,我有自己的Javascript函数(类),在其中我在画布上绘制一些图形 在开发过程中,我遇到了异步任务的问题,因为JS不允许任何类型的管理 我的代码如下所示: function imageEditor(canvas, image, options) { var that = this; this.getImageData = function (format, encoderOptions) { var animState = that._waitAnim.is

我有自己的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返回给用户


有没有可能在不更改整个代码的情况下执行此操作?

您不能使异步函数阻塞

您的尝试会阻止一切,包括正在等待的异步函数的回调


如果要在异步函数完成后执行某项操作,请将该操作放入函数中并将其用作回调。

在何处更改waitAnim.isRunning(即使其为false)?