Javascript 为什么嵌套SetTimeout中的removeAttribute调用没有被执行

我正在创建一个rolodex类型的动画，我正在使用计时器为3d动画设置一个类，并动态设置z索引，以便在需要时元素彼此覆盖和参考。每隔一秒钟，我都希望底部的跨度divs.children[1]设置类和样式属性，然后在这一秒中间，我希望底部删除属性，顶部的一半divs.children[0]开始动画

当我使用下面的代码时，对hideTop、showTop和showBottom的每次调用都会按预期工作，但无论何时调用hideBottom，都不会删除样式或类属性。我也尝试过使用setAttributestyle，但没有效果。我使用的是setIntervalfunction{…}，1000之前也产生了相同的行为

还有

    var i = 0;
    var x = 100;
    var firstRun = true;

    var digit = document.getElementById("digit");
    var divs = digit.getElementsByTagName("div");

    divs[0].children[0].setAttribute("style", "-webkit-transform: rotateX(0deg);");

    (function scrollRolodex() {
        function showTop(i, x) {
            divs[i].children[0].setAttribute("style", "z-index: " + ((i * x) + 10));
            divs[i].children[0].setAttribute("class", "flip-top");
        }

        function hideTop(i) {
            divs[i].children[0].removeAttribute("style");
            divs[i].children[0].removeAttribute("class");
        }

        function showBottom(i, x) {
            divs[i].children[1].setAttribute("style", "z-index: " + ((i * x) + 5));
            divs[i].children[1].setAttribute("class", "flip-bottom");       
        }

        function hideBottom(i) {
            divs[i].children[1].removeAttribute("style");
            divs[i].children[1].removeAttribute("class");
        }

        if (i < divs.length) { 
            if (i == 0 && !firstRun) {
                hideTop(divs.length - 1);
            } else if (i > 0) {
                hideTop(i - 1); 
            }

            showBottom(i, x);

            window.setTimeout(function() {
                hideBottom(i);
                if (i != (divs.length - 1)) {
                    showTop(i, x);
                } else {
                    showTop(divs.length - 1, x);
                }
            }, 500);

            if (i == divs.length - 1) {
                i = 0;
                x = 100;
                firstRun = false;
            } else {
                i++;
                x++;
            }
        }
        setTimeout(scrollRolodex, 1000);
    }());

谢谢

不应使用addAttribute/removeAttribute添加/删除类/样式。HTML属性决定HTML的当前状态，但有关当前DOM状态的权威信息在DOM节点属性中。相反，如果您不想使用任何类似的实用程序库，请使用属性来设置内联样式，并使用API来添加/删除类

编辑：再看一眼，我发现代码中还有一个bug。您正在计划使用原始变量值在0.5秒后执行部分操作，但随后更改了值。在这种情况下，您需要做的是将所需的值作为附加参数传递给setTimeout

---

它仍然无法正常工作，但您询问的部分似乎已修复。我将代码修改为更透明，但它也不起作用，我没有时间调试它。

看起来类flip bottom仍然没有被删除，尽管现在正在清除样式。你会注意到，因为类没有被删除，下半部分只是不断地上下翻转，没有z索引集，最上面的跨度将显示在顶部。类被删除了，只需插入console.logdivs[i].children[1].classList.contains'flip-bottom'；移除后。你的算法肯定还有另一个问题。Chrome inspector仍然在元素上显示flip bottom类，如果它被删除，动画不应该应用到最近的元素上吗？我已经更新了答案。您希望0.5s后执行的代码使用i和x的原始值，但实际上它是使用更新的值执行的。由于某些原因，它没有应用z-index样式。知道为什么吗？现在时机似乎恰到好处，只是在应用属性时出现了问题。