JS异步调用冻结css3动画

Question

我正在创建一个通过AJAX调用我们的API的Web应用程序。

我没有使用任何框架。

这是我不确定的progressHTML(只是来自 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; }
}

如果我在不进行 AJAX 调用的情况下打开data-status，这很有效。

当我这样做时，动画会"冻结"，直到 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');

阿贾克斯呼叫

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()并且只传递它三个参数，而忽略了第四个参数，即同步选项。我建议你把它专门设置为 true，这样它肯定是异步的。它可能仍然默认为异步，但我不能确定，明确传递异步行为的正确选项将保证你得到你想要的。