調用JavaScript的多次引起的setInterval永遠不會被清除

Question

我加載圖像到DOM

加載的圖像的圖像組和間隔，並檢查執行另一個改變圖像功能之前完全加載的功能顏色。

當文檔加載時，我執行此功能4次（4個不同的圖像），這導致至少有一個圖像的時間間隔永遠不會被清除，有時是多次。

功能：

function setCloth(clothImg, prefix){ 
    $('#'+prefix+'_cloth_div').html('<img class="" id="'+prefix+'_clothImg" src="/figures/'+clothImg+'" />'); 
    cloth = prefix+'Cloth'; 
    imageSource[cloth] = '/figures/'+clothImg; 

    checkClothInterval = setInterval(function(){ 
     if (document.getElementById(prefix+"_clothImg").complete){ 
       console.log('skin image complete'); 
       changeCloth(prefix, 'Cloth', '#ffffff'); 
       //==================================================== 
       //somehow this is not reached on a couple of the image loads 
       //==================================================== 
       clearInterval(checkClothInterval); 
      }else{ 
       console.log('skin image not complete'); 
      } 
    }, 100); 

} 

它是變量的作用域或東西嗎？

Answer 1

它是變量範圍什麼的？

是的，你沒有使用var，使他們都是全局聲明變量，而你只有一個checkClothInterval（全球），而不是爲每個區間。使用var每次聲明一個變量：

function setCloth(clothImg, prefix){ 
    $('#'+prefix+'_cloth_div').html('<img class="" id="'+prefix+'_clothImg" src="/figures/'+clothImg+'" />'); 
    var cloth = prefix+'Cloth'; 
    imageSource[cloth] = '/figures/'+clothImg; 

    var checkClothInterval = setInterval(function(){ 
     if (document.getElementById(prefix+"_clothImg").complete){ 
       console.log('skin image complete'); 
       changeCloth(prefix, 'Cloth', '#ffffff'); 
       clearInterval(checkClothInterval); 
      }else{ 
       console.log('skin image not complete'); 
      } 
    }, 100); 

}