在一个函数中来回更改id

Question

这是翻页硬币类的一部分，我根据硬币的当前状态和未来状态在css上制作了硬币动画，因此每次运行该功能时，我都必须将硬币重置为默认状态，然后使用新的CSS动画将其设置为将来的状态。.当我运行代码时，直到我添加了alert（“ hi”）行，它才起作用。.我不知道为什么，我想修复这是因为我不希望用户每次需要掷硬币时都单击“确定”

var flipCoin = function () {
flips ++;
var result = 1;
if (document.getElementById("fromHeadsToHeads") !== null) {
document.getElementById("fromHeadsToHeads").id = "defaultHeads";
}

switch (result) {
    case 1 :

        if (document.getElementById("defaultHeads") !== null) {
            alert("hi")
            document.getElementById("numFlips").innerHTML = flips;
            document.getElementById("defaultHeads").id = "fromHeadsToHeads";
        }
    break;
}

Answer 1

问题可能出在您设置I和调用getElementById之间，浏览器尚未重新渲染DOM。

当您发出警报时，浏览器可能会触发渲染。

可能有更好的方法来进行操作，但是要解决不重新呈现DOM的直接问题，您可以将警报后的所有内容放入由setTimeout调用的新匿名函数中。 有点像：

SetTimeout（function（）{...}，100）。 您将必须正确确定变量作用域，但这应该给DOM一个被更新的机会。