javascript - 用 jQuery 操作 DOM 时代码不同步？

Question

我有这个功能：

var decreaseBar = function (barElement) {
   insertCSSTransitions(barElement);
   $(barElement).find('.bar').width(0);
}

函数，这样insertCSSTransitions(barElement)做：

var insertCSSTransitions = function (barElement) {
      var timeBar = settings.timeBar;
      $(barElement).find('.bar').attr('style', 'transition:width ' + timeBar + 's; -moz-transition:width ' + timeBar + 's; -webkit-transition:width ' + timeBar + 's; -o-transition:width ' + timeBar + 's');
}

发生的情况是：在cssTransitions 的样式起作用之前将$(barElement).find('.bar').width(0);行设置为 0。width

因为，如果我修改decreaseBar函数，它可以工作：

var decreaseBar = function (barElement) {
   insertCSSTransitions(barElement);

   // set a delay of 1 second before set to 0
   setTimeout(function() {
      $(barElement).find('.bar').width(0);
   }, 1000)
}

用 jQuery 操作 DOM 时代码不同步？

score 0 · Accepted Answer

这里可能发生的情况是insertCSSTransitions()，在您重新绘制浏览器的释放控制之前，所做的样式更改无效。

您真的只需要使用setTimeout(..., 1)来确保在浏览器处理完transition样式后完成对元素宽度的更改。

score 0 · Accepted Answer

使用回调？

var decreaseBar = function (barElement) {
   insertCSSTransitions(barElement, function() {
       $(barElement).find('.bar').width(0);
   });
}

var insertCSSTransitions = function (barElement, callback) {
    var timeBar = settings.timeBar;
    $(barElement).find('.bar').attr('style', 'transition:width ' + timeBar + 's; -moz-transition:width ' + timeBar + 's; -webkit-transition:width ' + timeBar + 's; -o-transition:width ' + timeBar + 's');

    setTimeout(function() {callback.call();}, timebar*1000);
}

这只是一个简单的回调示例，它不会等待 CSS 转换发生，并且应该有一个简单的 typeof 检查来查看回调是否是一个函数，如果它也用于其他用途。

编辑：

正如 Pointy 指出的那样，回调并没有做太多事情，除了显示它是如何完成的等等。将回调绑定到转换结束可能是要走的路，但是该属性有一堆前缀，在这里用一些简单的浏览器解决检测，但有一些库可以检查浏览器中的实际支持。

var insertCSSTransitions = function (barElement, callback) {
    var timeBar = settings.timeBar,
        transitionEnd = "TransitionEnd";
    if ($.browser.webkit) {transitionEnd = "webkitTransitionEnd";}
    else if ($.browser.mozilla) {transitionEnd = "transitionend";}
    else if ($.browser.opera) {transitionEnd = "oTransitionEnd"; }

    $(barElement).find('.bar')
                 .attr('style', 'transition:width ' + timeBar + 's; -moz-transition:width ' + timeBar + 's; -webkit-transition:width ' + timeBar + 's; -o-transition:width ' + timeBar + 's');
                 .on(transitionEnd, function() {
                     callback.call();
    });
}

score 0 · Accepted Answer

JavaScript is always synchronous unless an AJAX call is being made: When is JavaScript synchronous?.

Your code is not working because you are using a CSS transition which would not be synchronous with JavaScript. JavaScript is "adding" the style transitions to the DOM and once complete, moving on.

I'm not quite sure of the purpose of your functions, so its difficult to come up with a better solution. All-in-all, it is usually bad practice to have JavaScript add hard coded styles like you are doing.

score 0 · Accepted Answer

人们谈论异步行为就像它是圣杯一样，但是当你想要它时让 JS 同步通常是更困难的任务。Frame.js（与其他流控制库如 asnyc 和 flow.js 一样）旨在解决这个问题。在 Frame 中，您将执行以下操作：

var decreaseBar = function (barElement) {
    Frame(function(next)){
        insertCSSTransitions(barElement);
        next();
    });
    Frame(function(next)){
        $(barElement).find('.bar').width(0);
        next();
    });
    Frame.init();
}

javascript - 用 jQuery 操作 DOM 时代码不同步？

4 回答 4

Related

Reference