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

}

多次调用javascript会导致setInterval永远不会被清除

1 个答案: