Javascript JS异步调用冻结css3动画

我正在创建一个webapp，它通过AJAX调用我们的API

我没有使用任何框架

这是我的不确定

进度

HTML（只是firefox构建块的副本）

这是进度动画

progress[value].pack-activity {
    background-image: url("../img/activity.png");
    background-repeat: repeat;
    background-size: auto 100%;
    animation: 0.5s move infinite steps(15);
}

@-webkit-keyframes move {
    from { background-position: 0 0; }
    to   { background-position: .64rem 0; }
}

如果我在不执行AJAX调用的情况下打开

数据状态

，这会很好地工作

当我这样做时，动画会“冻结”，直到AJAX调用完成。（我只能在请求时触发进度条执行

setTimeout

）

AJAX调用

execHttp : function() {
    try 
    {
        return new ActiveXObject('Msxml2.XMLHTTP')
    } 
    catch(e1)
    {
        try
        {
            return new ActiveXObject('Microsoft.XMLHTTP')
        }
        catch(e2)
        {
            return new XMLHttpRequest()
        }
    }
},

send : function(url, callback, method, from, data, sync) {

    var exec = this.execHttp();

    if(this.parent.config.sandbox)
    {
        url += "&sandbox=1";
    }

    exec.open(method, url, sync);

    var api = this;

    exec.onreadystatechange = function()
    {
        if(exec.readyState == 4)
        {
            var returnData = null;

            if(exec.responseText != "" && exec.responseText != null)
            {
                returnData = JSON.parse(exec.responseText);
            }

            if(callback[1] != null && callback[1] !== undefined)
            {
                try
                {
                    callback[1](returnData, exec, from, callback[0]);
                }
                catch (exception)
                {
                    console.log(exception);

                    if(api.checkCallback(callback[0]))
                    {
                        callback[0](null, exception);
                    }
                }
            }
            else
            {
                throw from.exception.simple("A callback is required.", "Api.send");
            }
        }
        else
        {
            if(callback[1] != null && callback[1] !== undefined)
            {
                try
                {
                    callback[1](returnData, exec, from, callback[0]);
                }
                catch (exception)
                {
                    console.log(exception);

                    if(api.checkCallback(callback[0]))
                    {
                        callback[0](null, exception);
                    }
                }
            }
            else
            {
                throw from.exception.simple("A callback is required.", "Api.send");
            }
        }
    }

    if(method == 'POST')
    {
        exec.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    }
    else
    {
        exec.setRequestHeader('Content-type', 'text/plain');
    }

    exec.send(data);

},

现场示例：

源代码：

我不知道是否有可能解决这个问题，但我想知道是否有一个解释

---

谢谢

好吧，既然我的评论奏效了，我就把它变成一个答案：

---

在

signIn（）

函数中，调用

this.api.get（）

并只传递三个参数，而不传递第四个参数，即sync选项。我建议您专门将其设置为true，这样它肯定是异步的。它可能仍然默认为异步，但我不能确定，显式传递正确的异步行为选项将确保您得到所需的。

该“ASYNCCALL”函数是什么样子的？代码非常庞大。。。我有一个signIn函数，可以访问一个API控制器，该控制器内部有一个AJAX请求发送器，所有内容都在github上。查看编辑。在github或链接的页面上找不到

AYSNCCALL（）

。你能不能把这个游戏简化成一个捉迷藏游戏，让我们看看这个功能的实际代码？请看编辑。。。但不管函数做什么，我们需要知道的是它使用XMLHttpRequest在signIn函数中，调用

this.api.get（）

，只传递三个参数，省去了第四个参数，即

sync

选项。我建议您专门将其设置为

true

，这样它肯定是异步的。它可能仍然默认为异步，但我不能确定。

progress[value].pack-activity {
    background-image: url("../img/activity.png");
    background-repeat: repeat;
    background-size: auto 100%;
    animation: 0.5s move infinite steps(15);
}

@-webkit-keyframes move {
    from { background-position: 0 0; }
    to   { background-position: .64rem 0; }
}

window.setTimeout(function()
{
inevent.personController.signIn(email.value, password.value, function(data, exception)
{
    progress.setAttribute('data-status', 'off');

    if(exception !== undefined)
    {
        transition.message.setAttribute('data-status', 'on');

        window.setTimeout(function()
        {
            transition.message.setAttribute('data-status', 'off');
        }, 3000);

        switch(exception.content.status)
        {
            case 409:
                transition.message.innerHTML = "Please fill all fields!";
                break;
            case 401:
                transition.message.innerHTML = "Username or password incorrect!";
                break;
        }
    }
    else
    {
        transition.next('home');
    }
});
}, 200);

progress.setAttribute('data-status', 'on');

execHttp : function() {
    try 
    {
        return new ActiveXObject('Msxml2.XMLHTTP')
    } 
    catch(e1)
    {
        try
        {
            return new ActiveXObject('Microsoft.XMLHTTP')
        }
        catch(e2)
        {
            return new XMLHttpRequest()
        }
    }
},

send : function(url, callback, method, from, data, sync) {

    var exec = this.execHttp();

    if(this.parent.config.sandbox)
    {
        url += "&sandbox=1";
    }

    exec.open(method, url, sync);

    var api = this;

    exec.onreadystatechange = function()
    {
        if(exec.readyState == 4)
        {
            var returnData = null;

            if(exec.responseText != "" && exec.responseText != null)
            {
                returnData = JSON.parse(exec.responseText);
            }

            if(callback[1] != null && callback[1] !== undefined)
            {
                try
                {
                    callback[1](returnData, exec, from, callback[0]);
                }
                catch (exception)
                {
                    console.log(exception);

                    if(api.checkCallback(callback[0]))
                    {
                        callback[0](null, exception);
                    }
                }
            }
            else
            {
                throw from.exception.simple("A callback is required.", "Api.send");
            }
        }
        else
        {
            if(callback[1] != null && callback[1] !== undefined)
            {
                try
                {
                    callback[1](returnData, exec, from, callback[0]);
                }
                catch (exception)
                {
                    console.log(exception);

                    if(api.checkCallback(callback[0]))
                    {
                        callback[0](null, exception);
                    }
                }
            }
            else
            {
                throw from.exception.simple("A callback is required.", "Api.send");
            }
        }
    }

    if(method == 'POST')
    {
        exec.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    }
    else
    {
        exec.setRequestHeader('Content-type', 'text/plain');
    }

    exec.send(data);

},