Question

我正在创建一个通过AJAX调用API的webapp。

我没有使用任何框架。

这是我不确定的progress HTML（只是来自firefox构建块的副本）

<progress class="pack-activity light" value="0" max="100" data-status="off">
</progress>

这是我的CSS触发进度

progress[data-status="off"] {
    opacity: 0;

    -webkit-transition: opacity 1s;
       -moz-transition: opacity 1s;
        -ms-transition: opacity 1s;
            transition: opacity 1s;
}

progress[data-status="on"] {
    opacity: 1;

    -webkit-transition: opacity 0.2s;
       -moz-transition: opacity 0.2s;
        -ms-transition: opacity 0.2s;
            transition: opacity 0.2s;
}

这是进度动画

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

如果我在上打开data-status而没有进行AJAX调用，则效果很好。

当我这样做时，动画'冻结'直到AJAX调用结束。（我只能触发进度条在请求中执行setTimeout）

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');

AJAX CALL

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

},

直播示例： http://mauriciogiordano.com:3000/webapp/webapp/

消息代码： https://github.com/estudiotrilha/InEvent/tree/webapp-dev

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

谢谢！

Answer 1

好的，既然我的评论有效，我会把它变成答案：

在signIn()函数中，调用this.api.get()并且只传递三个参数，而不是第四个参数，即sync选项。我建议你专门设置为true，这样肯定会异步。它可能仍然是默认的异步，但我无法确定并明确传递正确的异步行为选项将保证您得到您想要的。

JS异步调用冻结了css3动画

1 个答案: