はクリアされることはありませんしたsetIntervalを引き起こし

Question

私はDOM

画像の画像セットと間隔とチェックは、画像を変更し、別の機能を実行する前に完全にロードされるロード機能に画像をロードしています色。

この機能を4回実行すると（4つの異なる画像）、少なくとも1つの画像で複数の画像が重複して表示されることはありません。

機能：それは変数のスコープか何か

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を使用していない、とあなただけの1 checkClothInterval（グローバル）の代わりに、各間隔のための1つを持っています。地元のために[ `var`]（https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/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); 

}