javascript - 如何确定 javascript 已完成某项操作

Question

ios上的JS相当慢。例如在这段代码中，Js 在能够添加块样式之前添加了类。这打破了我在页面上的动画。

comments.style.display="block";comments.className = "show";

我有一个解决方法可以解决 ios 上的问题，但感觉不对：

comments.style.display="block";setTimeout(function(){comments.className = "show";},1)

有没有办法确定块样式是否已设置，然后才触发第二部分？

感谢您的建议！

Answer 1

你不能只使用if吗？

<div id="foo" style="display: none;">foo</div>

var div = document.getElementById( "foo"  );
if ( div.style.display == "none" ) {
    div.style.display = "block";
}

如果您想收听班级更改（或样式更改）“事件”，可以尝试以下链接：

• 事件检测何时使用 Jquery <= 更改 css 属性这解决了没有 jQuery 的问题
• jQuery - 如果 CSS 类发生更改，则触发事件
• 在 CSS 更改上使用 Jquery 触发事件？
• 是否可以收听“风格改变”事件？

我认为第一个将解决您的问题。这是代码：

document.documentElement.addEventListener( "DOMAttrModified", function( evt ){
    if ( evt.attrName === "style" ) {
        if ( evt.newValue.indexOf( "block" ) != -1 ) {
            alert( "do something!" );
        }
    }
}, false );

document.getElementById( "foo" ).style.display = "block";

Answer 2

这是一个可能有效的黑客的光荣混乱：

comments.blockStyleEvent = function() {
   if ( this.style.display === "block" ) {
      this.onBlockStyleEvent.apply(this);
   }
};

comments.onBlockStyleEvent = function() {
   this.className = "show";
};

setInterval(function(){
  comments.blockStyleEvent();
}, 1);

show例如，您还可以一个又一个地创建两个 css 类，showAsBlock然后您可以这样做：

// somewhere else
comments.className = "hide";

// ...then
comments.className = "showAsBlock";