Javascript jQuery添加类并休眠，然后删除类

我有一张图像地图，上面有几个div作为城市点。我在css中编写了一个类来设置这些点的颜色动画，这样我就可以通过jQuery添加这个类，等等，然后删除这个类。目标是随机设置这些点的动画（添加类、等待、随机移除类），但目前我一直在等待移除类。我尝试了不同的解决方案，包括那些张贴在这个网站上的，但没有结果。Hre是代码：

        function builtCities() {
            if ($('body.page-service-map').size()) {
                var content = $('#region-content .content'),
                    cityDot = '<div class="city-dot"></div>',
                    cities = [
                        'moscow',
                        'saint-petersburg',
                        'krasnodar',
                        'rostov-na-donu',
                        'tyumen',
                        'omsk',
                        'irkutsk'
                    ];

                for (var i = 0; i < 7; i++) {
                    content.append(cityDot);
                }

                $('body.page-service-map .city-dot').each(function (index) {
                    $(this).addClass(cities[index]);
                });

                // animation
                for (var j = 0; j < cities.length; j++) {                       
                    function partA(partB) {
                        $('.city-dot').eq(j).addClass('animate');
                        window.setTimeout(partB, 1000);
                    } partA(partB);

                    function partB() {
                        $('.city-dot').eq(j).removeClass('animate');
                    }           
                }


            }
        } builtCities();

function-builcities（）{
if（$（'body.page服务映射'）.size（））{
var content=$（“#region content.content”），
cityDot=“”，
城市=[
“莫斯科”，
“圣彼得堡”，
“克拉斯诺达尔”，
“罗斯托夫·纳多努”，
"秋门",，
“鄂木斯克”，
“伊尔库茨克”
];
对于（变量i=0；i<7；i++）{
content.append（cityDot）；
}
$（'body.page-service-map.city dot'）。每个（函数（索引）{
$（此）.addClass（城市[索引]）；
});
//动画
对于（var j=0；j

由于闭包，它无法工作。这样做：

for (var j = 0; j < cities.length; j++) { 
    $('.city-dot').eq(j).addClass('animate');
    window.setTimeout((function (j) {
        return function () {
            $('.city-dot').eq(j).removeClass('animate');
        };
    }(j)), 1000);
}

for（var j=0；j

---

您当前的变量不起作用，因为您的

j

变量将被持久化，并且在您调用

partB

时实际上等于

cities.length

。为了解决这个问题，上面调用了一个传入

j

的函数，该函数将使用一个单独的变量（参数

j

）返回另一个函数，该变量将使用正确的索引。

它因闭包而不起作用。这样做：

for (var j = 0; j < cities.length; j++) { 
    $('.city-dot').eq(j).addClass('animate');
    window.setTimeout((function (j) {
        return function () {
            $('.city-dot').eq(j).removeClass('animate');
        };
    }(j)), 1000);
}

for（var j=0；j

---

您当前的变量不起作用，因为您的

j

变量将被持久化，并且在您调用

partB

时实际上等于

cities.length

。为了解决这个问题，上面调用了一个传入

j

的函数，该函数将使用一个单独的变量（参数

j

）返回另一个函数，该变量将使用正确的索引。

我将一个调试器放入超时，现在我看到动画工作，但可能是超时太快了。我的意思是它没有像预期的那样等待。你确定你在

setTimeout

中有括号吗？对于（var j=0；jalert（）的示例，在这种情况下使用alert不是一个好主意，因为它会停止执行js本身。我在超时中放置了一个调试器，现在我看到动画可以工作，但可能是超时太快了。我的意思是它没有像预期的那样等待。你确定你在

setTimeout

中有括号吗？对于（var j=0；jalert（）的示例，在这种情况下使用alert不是一个好主意，因为它会停止执行js本身。