jQuery添加班級和睡眠然後刪除班級

Question

我有一個圖像地圖，它有幾個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(); 

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變量將是持久的和實際上是在你調用partB時間等於cities.length。爲了解決這個問題，上面調用了一個函數j，它將使用一個單獨的變量（參數j）返回另一個函數，該變量將使用正確的索引。