javascript - 使用jQuery处理DOM时代码未同步？

我有这个功能：

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);行将width设置为0。

因为，如果我修改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时代码未同步？

最佳答案

可能发生的情况是，insertCSSTransitions()所做的样式更改在您重新启用浏览器的释放控制后才生效。

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