加载后将媒体变量添加到数组时如何不改变媒体变量。关闭？答案

【问题标题】：How to not mutate media variables when adding them to array after load. Closures?加载后将媒体变量添加到数组时如何不改变媒体变量。关闭？
【发布时间】：2014-07-08 00:10:48
【问题描述】：

我有一系列图片链接和视频链接。我从JSON 提要中获取它们并将它们一一添加到我的数组中。我想确保它们已完全加载，因此我分别对图像和视频使用 onload 和 canplaythrough 事件侦听器。但是，当我记录数组的结果时，似乎从未添加过视频，我想知道这是否是因为我正在等待canplaythrough 事件在for 循环中触发，这正在改变我的newMediaObject 的值（我组成的构造函数）。我在我的代码的前半部分使用了一个闭包来防止这种情况，其中正在加载图像，但我不确定如何在视频部分实现相同的方法。我是否需要从这里开始关闭这是我的代码：

    for(i = entries.length -1; i >=0 i -=1){
    //Do I somehow start both closures here or do I make one in each part of the for loop (i.e. the video and image for loop)
    if (entries[k].type == 'image') {
        mediaObject.isVideo = false;
        mediaObject.url = entries[k]['ssMetaData']['images']['standard_resolution']['url'];
        var img = new Image();
        img.onload = (function (entry) {
             //Here I am using a closure to prevent accessing the mutable variable
                return function () {
                    contentArrayNew.push(entry);
                    preLoadDone = true;
                }
        })(mediaObject);
        img.onerror = function () {
            console.log('error: bad image source');
        };
        img.src = mediaObject.url;
    } else if (entries[k].type == 'video') {
        var loadVideo = document.createElement('video'); //Temp video to preload without displaying
        mediaObject.isVideo = true;

        //I think the error comes here, when "canplaythrough" hasn't fired and so its properties are set to another item in the array's    

        mediaObject.url = entries[k]['ssMetaData']['videos']['standard_resolution']['url'];
        loadVideo.addEventListener('canplaythrough', function () {
            contentArrayNew.push(mediaObject);
                    preLoadDone = true;
                    imagesLoaded();
                }
            }
        }, false);
        loadVideo.src = mediaObject.url;
    }
}

【问题讨论】：

标签： javascript arrays closures

【解决方案1】：

是的，每当您创建一个将异步执行并访问循环变量的回调时，您都需要一个闭包。 canplaythrough 处理程序使用mediaObject，因此它也需要一个。

为简单起见，您不妨将整个循环体包装在 IEFE 中以创建范围，而不是包装每个回调。

【讨论】：