JS异步调用冻结了css3动画(JS Async call freezes css3 animation)

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

我没有使用任何框架。

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

这是我的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 ）

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

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

谢谢！

I'm creating a webapp that calls our API through AJAX.

I'm not using any framework.

Here is my indeterminate progress HTML (just a copy from firefox building blocks)

Here is my CSS that triggers the progress

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

Here is the progress animation

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

This works well if I turn data-status on without doing an AJAX call.

When I do it, the animation 'freezes' until the AJAX call finishes. (I only could trigger the progress bar doing a setTimeout on the request)

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

LIVE EXAMPLE: http://mauriciogiordano.com:3000/webapp/webapp/

SOURCE CODE: https://github.com/estudiotrilha/InEvent/tree/webapp-dev

I don't know if it is possible to solve this, but I wondering if is there an explanation about it.

Thanks!

最满意答案

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

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

OK, since my comment worked, I will turn it into an answer:

In the signIn() function, you call this.api.get() and you pass it only three arguments, leaving off the fourth argument which is the sync option. I'd suggest you set that specifically to true so it will be async for sure. It might still be defaulting to async, but I can't tell for sure and explicitly passing the right options for async behavior will guarentee you get what you want.

更多推荐

JS异步调用冻结了css3动画(JS Async call freezes css3 animation)

最满意答案

发布评论取消回复

最近发表

热门文章

标签列表