javascript - jQuery 添加类并 sleep 然后删除类

Question

我有一个图像 map ，上面有几个 div 作为城市点。我在 css 中编写了一个类来对这些点的颜色进行动画处理，因此我可以通过 jQuery 添加该类，等待一段时间并删除该类。目标是随机地对这些点进行动画处理(添加类、等待、随机删除类)，但目前我在删除类之前必须等待。我尝试了不同的解决方案，包括本网站上发布的解决方案，但没有结果。代码如下:

        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();

Answer 1

由于关闭，它无法工作。这样做:

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);
}

您当前的变量不起作用，因为您的 j 变量将被保留，并且在您调用 时实际上等于 cities.length B 部分。为了解决这个问题，上面调用了一个传入 j 的函数，该函数将使用一个单独的变量(参数 j)返回另一个函数，该变量将使用正确的索引。