javascript - 从事件监听器更新全局变量

Question

这个问题已经有答案了:

Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference (7 个回答)

已关闭 9 年前。

我正在尝试收集页面上所有视频的时间并将它们添加到数组中。这是代码:

var allvideos = $('video');
var times = [];
for ( i=0; i < allvideos.length; i++ ) {
    allvideos[i].addEventListener('loadedmetadata', function() {
        videoDuration = this.duration;
        times.push(videoDuration);
    });
};

如果我在 EventListener 中 console.log(times) ，它会按预期工作，但如果我在 for 循环之后记录它，它是空的。我不明白这是为什么。有人可以帮忙吗，请解释一下原因？非常感谢。

我正在使用 jQuery 和 Video.js。

小

Answer 1

想想你的代码是如何执行的:

1. 创建times数组
2. 设置事件监听器
3. 使用console.log输出times数组中的值
4. 调用事件监听器并将其推送到 times 数组

它没有显示 times 数组中的 videoDuration 的原因是 times 在该时间点为空。您必须等到所有事件监听器都被调用后才能输出数组中的值。

<小时/>

如果您想在调用所有事件监听器后输出数组，则可以执行以下操作:

for (var i = 0; i < allvideos.length; i++) {
    allvideos[i].addEventListener('loadedmetadata', function() {
        times.push(this.duration);

        if (times.length === allvideos.length) {
            console.log(times);
        }
    });
};