Javascript 测试jQuery.hide（）和.show（），它们之间用alert:div not hiding分隔

下面是非常基本的代码：

$('.myDiv').click(function() {

    $('.anotherDiv').hide();
    alert('pause the ui');
    $('.anotherDiv').show();
});

当我执行上述操作时，警报显示，

.anotherDiv

仍会显示。我希望它被隐藏起来

如果我删除以下行：

$（'.anotherDiv'）.show（）然后该div确实隐藏了。所以我知道jQuery知道他的div存在

我期望在重新显示div之前暂停UI的警报。JavaScript/jQuery不是这样工作的吗？
。隐藏
可以在元素隐藏后运行回调：

$('.myDiv').click(function() {
    $('.anotherDiv').hide(function() {
          alert('pause the ui');
          $('.anotherDiv').show();
    });
});

问题基本上是，尽管元素已被告知隐藏自身，但浏览器尚未重新绘制，并且警报会停止所有其他执行。
As，您可以通过从函数返回来强制重新绘制。您可以使用
setTimeout
执行此操作，如下所示：

$('.myDiv').click(function() {
    $('.anotherDiv').hide();
    setTimeout(
        function(){
            alert('pause the ui');
            $('.anotherDiv').show();
        },
        0
    );
});

我认为这实际上取决于浏览器。在从Javascript返回到主事件循环之前，您不能真正依赖于任何呈现的内容。@Barmar有趣的是，我只是在ChromeSo中测试它是否真的隐藏在现实生活中？如果我在两条显示/隐藏线之间进行重物搬运，我能指望它被隐藏吗？顺便说一句，这是一个很好的解决方案，我可以用它。让我先测试一下，有人叫它藏起来。如果它被告知在重新绘制之前不要隐藏，那么它就永远不会真正被隐藏（除非您使用回调让它等待，直到它真正被隐藏为止）。