Javascript jQuery addClass to multiple elements显示意外延迟

我正在制作一个翻转计数器，当达到目标数字（本例中为1000）时，它应该会改变颜色。但问题是计数器的不同部分不会同时改变颜色，我们可以清楚地看到组成计数器的瓷砖之间的延迟

我使用一个简单的jQuery addClass触发颜色更改：

$("#rhcounter .count").addClass("red");

你知道是什么引起的吗

这是小提琴：

---

谢谢你的帮助

发生这种情况是因为您在更改文本之前更改了颜色。我只是改变了条件，我想这就是你想要的

$（窗口）.load（函数（）{
var总计=1000，电流=950，超时=150，inc=7，
prevTiles=[“0”、“0”、“0”、“0”]，
interval=setInterval（函数（）{increase（）}，超时），
增加=功能（）{
当前+=公司；
如果（当前>=总计）{
间隔时间；
电流=总电流；
}
var tiles=[false，false，false，false]，
currStr=（当前+）.split（“”）。reverse（）.join（“”）；
对于（变量i=0；idiv[class~='tile'+index+']>span[class~='curr']）{
$（this.text（$（“#rhcounter>div[class~='tile”+index+']>span.count.next.top”）.text（）；
});
$（“#rhcounter>div[class~='tile'+index+']）；
setTimeout（function（）{$（“#rhcounter>div[class~='tile'+index+']））.addClass（“flip”）；}，5）；
var top=$（“#rhcounter>div[class~='tile'+index+']>span.count.next.top”），
bottom=$（“#rhcounter>div[class~='tile+index+”]>span.count.next.bottom”），
延迟=（索引==0？超时：250）；
setTimeout（函数（）{top.text（prevTiles[index]）；}，delay/2）；
setTimeout（函数（）{bottom.text（prevTiles[index]）；}，delay/2）；
});
如果（当前===总计）{
$（“#rhcounter.count”）.addClass（“红色”）；
}};
});

第一期： 有大量的浪费处理正在进行。jQuery选择器有一个开销，所以将它们减少到最小，而复杂的选择器更是如此。我已经大大减少了

第二期： 有些浏览器出现了一个严重的视觉故障，如下所示：

您可以使用

背景色：

而不是

背景色：

（尝试完全重新渲染区域，而不是仅填充背景色）来消除此问题

第三期： 留下的蓝色是为了缓慢地重新绘制屏幕。上面的两个补丁产生了巨大的影响，我还尝试添加只适用于red类的特定CSS动画。现在您知道绘制速度慢的原因（例如，有蓝色和红色CSS动画？），这可能会得到改进：

$（函数（）{
var总计=1000，
电流=950，
超时=150，
inc=7，
prevTiles=[“0”、“0”、“0”、“0”]，
间隔=设置间隔（函数（）{
增加
}，超时），
增加=功能（）{
当前+=公司；
如果（当前>=总计）{
间隔时间；
电流=总电流；
}
如果（当前===总计）{
$（“#rhcounter.count”）.addClass（“红色”）；
}
//延迟css的即时计时器
setTimeout（函数（）{
var tiles=[false，false，false，false]，
currStr=（当前+）.split（“”）。reverse（）.join（“”）；
对于（变量i=0；i

对于初学者来说，反复调用同一个jQUery选择器而不是将第一个结果保存在一个var中并使用它是没有帮助的：）根据您的描述，我还没有找出实际的问题，但这里有一个更快的版本：谢谢您的示例，它看起来确实更干净，但似乎有问题，我会调查一下“红色”类在哪里。这是在.css中吗？我以前的提琴颠倒了顺序，因为我没有发现你在HTML中的tile3、2、1和0是按相反顺序排列的。我修复了这个问题和下面的一些其他问题。希望能有所帮助：）我的屏幕仍然在那个样本上发疯

$(window).load(function() {
    var total = 1000, current = 950, timeout = 150, inc = 7,
        prevTiles = ["0","0","0","0"],
        interval = setInterval(function(){increase()}, timeout),
        increase = function () {
            current += inc;

            if (current >= total) { 
                clearInterval(interval);
                current = total;
            }



            var tiles = [false, false, false, false], 
                currStr = (current+"").split("").reverse().join("");

            for (var i = 0; i < currStr.length; i++) {
                if (currStr[i] !== prevTiles[i]) { 
                    tiles[i] = true; 
                    prevTiles[i] = currStr[i];
                }
            }

            tiles.forEach(function (tile, index) {
                if (!tile) { return; }

                $("#rhcounter > div[class~='tile"+index+"'] > span[class~='curr']").each(function() {
                    $(this).text($("#rhcounter > div[class~='tile"+index+"'] > span.count.next.top").text());
                });
                $("#rhcounter > div[class~='tile"+index+"']").removeClass("flip");
                setTimeout(function(){$("#rhcounter > div[class~='tile"+index+"']").addClass("flip");}, 5);

                var top = $("#rhcounter > div[class~='tile"+index+"'] > span.count.next.top"),
                    bottom = $("#rhcounter > div[class~='tile"+index+"'] > span.count.next.bottom"),
                    delay = (index === 0 ? timeout : 250);

                setTimeout(function(){ top.text(prevTiles[index]); }, delay/2);
                setTimeout(function(){ bottom.text(prevTiles[index]); }, delay/2);
            });
         if (current === total) { 
                $("#rhcounter .count").addClass("red");
            }};
});

$(function () {
    var total = 1000,
        current = 950,
        timeout = 150,
        inc = 7,
        prevTiles = ["0", "0", "0", "0"],
        interval = setInterval(function () {
            increase()
        }, timeout),
        increase = function () {
            current += inc;

            if (current >= total) {
                clearInterval(interval);
                current = total;
            }

            if (current === total) {
                $("#rhcounter .count").addClass("red");
            }
            // instant timer to delay css
            setTimeout(function () {
                var tiles = [false, false, false, false],
                    currStr = (current + "").split("").reverse().join("");

                for (var i = 0; i < currStr.length; i++) {
                    if (currStr[i] !== prevTiles[i]) {
                        tiles[i] = true;
                        prevTiles[i] = currStr[i];
                    }
                }

                tiles.forEach(function (tile, index) {
                    if (!tile) {
                        return;
                    }

                    // Get the current tile
                    var $tile = $("#rhcounter div.tile" + index);
                    $tile.children('span.curr').each(function () {
                        $(this).text($tile.text());
                    });
                    $tile.removeClass("flip");
                    setTimeout(function () {
                        $tile.addClass("flip");
                    }, 5);

                    var top = $tile.find("span.count.next.top"),
                        bottom = $tile.find("span.count.next.bottom"),
                        delay = (index === 0 ? timeout : 250);

                    setTimeout(function () {
                        top.text(prevTiles[index]);
                    }, delay / 2);
                    setTimeout(function () {
                        bottom.text(prevTiles[index]);
                    }, delay / 2);
                });
            }, 1);
        };
});