Javascript getFileAsync太慢，导致appendChild追加到数组中的最后一个div

我使用WinJS在Javascript Windows应用程序中有一个按钮网格

    <div class="padtable">
        <button class="pad" id="pad11">Empty</button>
        <button class="pad" id="pad12">Empty</button>
        <button class="pad" id="pad13">Empty</button>
        <button class="pad" id="pad14">Empty</button><br />
        <button class="pad" id="pad21">Empty</button>
        <button class="pad" id="pad22">Empty</button>
        <button class="pad" id="pad23">Empty</button>
        <button class="pad" id="pad24">Empty</button><br />
        <button class="pad" id="pad31">Empty</button>
        <button class="pad" id="pad32">Empty</button>
        <button class="pad" id="pad33">Empty</button>
        <button class="pad" id="pad34">Empty</button><br />
        <button class="pad" id="pad41">Empty</button>
        <button class="pad" id="pad42">Empty</button>
        <button class="pad" id="pad43">Empty</button>
        <button class="pad" id="pad44">Empty</button><br />
    </div>

空的
空的
空的
空的

空的
空的
空的
空的

空的
空的
空的
空的

空的
空的
空的
空的

然后我尝试循环浏览所有按钮，如果它与文件关联，我尝试将该文件作为音频标记，并将其附加到其中。除了获取文件需要的时间太长之外，它不会将音频标记附加到每个按钮，而是将所有音频标记附加到最后一个按钮。我怎样才能解决这个问题？以下是执行追加操作的代码：

var pads = document.querySelectorAll(".pad");
            // Cycle through all pads, attaching audio tags where mappings exist
            for (var padCount = 0; padCount < pads.length - 1; padCount++) {
                // Find out if the mapping exists
                var fileMappingExists = false;
                if (fileMappings[pads[padCount].id] != null) {
                    fileMappingExists = true;
                }

                // If the file mapping exists, get the file from the FAL, and create audio tags tied to their respective buttons
                if (fileMappingExists) {
                    Windows.Storage.AccessCache.StorageApplicationPermissions.futureAccessList.getFileAsync(fileMappings[pads[padCount].id].audioFile).done(function (audioFile) {
                        if (audioFile) {
                            var audioId = "audioPlayer_" + pads[padCount].id;
                            var audioPlayer = document.createElement('audio');
                            audioPlayer.setAttribute("id", audioId);
                            audioPlayer.setAttribute("controls", "true");
                            audioPlayer.setAttribute("style", "display:none;");
                            audioPlayer.setAttribute("msAudioCategory", "SoundEffects");
                            audioPlayer.src = URL.createObjectURL(audioFile, { oneTimeOnly: true });
                            document.getElementById(pads[padCount].id).appendChild(audioPlayer);
                            audioPlayer.load();

                            // Assign button click to song play
                            // TODO | BUG: Click events and audio tags are only assigned to last pad because of getFileAsync
                            var pad = document.getElementById(pads[padCount].id);
                            pad.addEventListener("click", function () {
                                // Set audio to start if it's already playing
                                if (audioPlayer.currentTime != 0)
                                    audioPlayer.currentTime = 0;

                                // Play the file
                                audioPlayer.play();
                            }, false);

                            WinJS.log && WinJS.log("Audio file was added successfully for" + pads[padCount].id, "sample", "status");
                        }
                        else {
                            document.getElementById("output").innerText += "\nAudio file not found for " + pads[padCount];
                        }
                    });


         }
}

var pads=document.querySelectorAll（“.pad”）；
//在所有焊盘上循环，在存在映射的地方附加音频标签
对于（var padCount=0；padCount

要了解这里发生了什么，请阅读

以下是解决问题的一种方法：

// If the file mapping exists, get the file from the FAL, and create audio tags tied to their respective buttons
if (fileMappingExists) {
    Windows.Storage.AccessCache.StorageApplicationPermissions.futureAccessList.getFileAsync(fileMappings[pads[padCount].id].audioFile).done(
        (function (pc) {
            return function (audioFile) {
                if (audioFile) {
                    var audioId = "audioPlayer_" + pads[pc].id;
                    var audioPlayer = document.createElement('audio');
                    audioPlayer.setAttribute("id", audioId);
                    audioPlayer.setAttribute("controls", "true");
                    audioPlayer.setAttribute("style", "display:none;");
                    audioPlayer.setAttribute("msAudioCategory", "SoundEffects");
                    audioPlayer.src = URL.createObjectURL(audioFile, { oneTimeOnly: true });
                    document.getElementById(pads[pc].id).appendChild(audioPlayer);
                    audioPlayer.load();

                    // Assign button click to song play
                    // TODO | BUG: Click events and audio tags are only assigned to last pad because of getFileAsync
                    // FIXED AS WELL
                    var pad = document.getElementById(pads[pc].id);
                    pad.addEventListener("click", (function (ap) {
                        return function () {
                            // Set audio to start if it's already playing
                            if (ap.currentTime != 0)
                                ap.currentTime = 0;

                            // Play the file
                            ap.play();
                        };
                    })(audioPlayer), false);

                    WinJS.log && WinJS.log("Audio file was added successfully for" + pads[pc].id, "sample", "status");
                }
                else {
                    document.getElementById("output").innerText += "\nAudio file not found for " + pads[pc];
                }
            };
        })(padCount);
    );
}

---

我认为“慢”与此无关。在所有这些代码中，实际问题发生在哪里？在哪里追加元素以及如何确定追加到哪里？每次运行

.done

函数时，变量

padCount

将等于

pads.length-1

。谢谢，这非常有效。我不知道闭包，所以谢谢你的链接。这里还有一条评论（因为我还需要删除click事件监听器）。我将函数移动到代码中的一个单独位置，并通过pad.addEventListener调用它（“单击”，playAudioFileOnClick（audioPlayer），false）；playAudioFileOnClick具有与上述相同的定义。但是，当我尝试pads[padCount].removeEventListener（“单击”，playAudioFileOnClick，false）时；它不工作，即它仍然播放音频文件。我甚至使用了var audioElement=document.getElementById（audioId）；焊盘[padCount].removeChild（audioElement）；要删除音频标记但仍播放，您需要为回调函数设置一个变量，例如

var listener=playAudioFileOnClick（audioPlayer）

，然后

pad.addEventListener（“单击”，listener，false）和类似的
pad.removeEventListener（“单击”，listener，false）参数是什么，即playAudioFileOnClick（audioPlayer）。pad.addEventListener（“单击”，listener（audioPlayer），false）是否有效？参数有效，但pad.removeEventListener（“单击”，listener，false）无效。也许这需要一个单独的问题。谢谢你的帮助，詹姆斯。