Question

我的言语很简短，情况如下：

for (var _im = 0; _im < slideshow._preloadbulks[slideshow._preloadCurrentbulk].length; _im++) {
    var tmpSlideIndex = (slideshow._preloadCurrentbulk*slideshow._preloadMaxbulkSize)+_im;
    slideshow._preloadSlides[tmpSlideIndex] = document.createElement('video');
    slideshow._preloadSlides[tmpSlideIndex].autoplay = false;
    slideshow._preloadSlides[tmpSlideIndex].loop = false;
    slideshow._preloadSlides[tmpSlideIndex].addEventListener('canplaythrough', slideshow.slideLoaded, false);
    slideshow._preloadSlides[tmpSlideIndex].src = slideshow._slides[tmpSlideIndex][slideshow.image_size+"_video_url"];
    slideshow._preloadSlides[tmpSlideIndex].addEventListener('error', function(){
        console.log(tmpSlideIndex);
        slideshow._preloadSlides.splice(tmpSlideIndex,1);
        slideshow._slides.splice(tmpSlideIndex,1);
        slideshow.slideLoaded();
    }, true);
}

如您所见，我有一个视频数组，我正在将每个元素src加载到DOM中以预加载它。它工作正常，但我必须处理一个资源是不适用的情况，然后我需要从现有的数组中删除它。 addEventListener（'error'，工作得很好，它检测到不可用的资源但是当我将 tmpSlideIndex 记录到控制台时，我获得了不同的值而不是原始的幻灯片index（因为循环继续）。

我已经尝试过设置useCapture标志，因为你可以看到错误处理程序，认为这样做会有效但不会。

任何诡计？谢谢！

Answer 1

问题在于，当您在tmpSlideIndex变量上创建闭包时，它允许您在子函数内引用该变量，但它不会创建一个全新的变量，并且由于循环继续并且您的错误处理程序函数异步执行，tmpSlideIndex的值将始终是循环的最后一个索引。为了保持原始值，我们可以创建一个自执行函数，以便传递tmpSlideIndex的值。该自执行函数将有效地创建一个新的范围，我们最终将返回一个函数，该函数将在slideIndex变量上创建一个闭包，该变量位于其父函数范围内。

slideshow._preloadSlides[tmpSlideIndex].addEventListener('error', (function(slideIndex) {
    return function () {
        console.log(slideIndex);
        slideshow._preloadSlides.splice(slideIndex,1);
        slideshow._slides.splice(slideIndex,1);
        slideshow.slideLoaded();
    };
})(slideIndex), true);

Javascript - 找出哪些资源无法从数组加载

1 个答案: