javascript - 访问 Javascript 映射中的值时出现问题，函数执行顺序可能存在问题

Question

我正在开发 Twilio 视频应用程序，但在访问通过 map 传送的远程参与者视频/音频轨道时遇到问题。使用开发工具告诉我，我需要的值应该可以通过我正在使用的方法访问，但它似乎不起作用。
设置房间的代码:

function connectVid(){
Twilio.Video.connect(localStorage.vidToken, {
    audio: true,
    video: {width: 520}
}).then(function(room){
    window.room = room;
    console.log('Connected to Room: ', room.name);
    Twilio.Video.createLocalTracks().then(function(localTracks) {
        console.log('Creating tracks in Room: ');
        console.log(room);
        console.log('Got default audio and video tracks: ', localTracks);
        var localParticipant = room.localParticipant;
        trackArray = localTracks;
        console.log(trackArray);
        console.log('Connected to the Room as localParticipant "%s"', localParticipant.identity);
        var localMediaContainer = document.getElementById('lstream');
        localTracks.forEach(function(track) {
            localMediaContainer.appendChild(track.attach());
        });
    })
}).then(function(room){
    attachRemoteParticipant();
}).catch(function(err){
    console.log(err.message);
    if(err.code === 20104) {
        getVidToken();
    };
})
};

AttachRemoteParticipant();代码:

function attachRemoteParticipant() {
room.participants.forEach(function(participant) {
    console.log('Participant "%s" is connected to the Room', participant.identity);
    var remoteContainer = document.getElementById('rstream');
    var remoteTracks = Array.from(participant.tracks.values());
    console.log("Remote Tracks COMING:");
    console.log(remoteTracks);
    remoteTracks.forEach(function(track){
        console.log('In Remote 4 each');
        console.log(track); 
        remoteContainer.appendChild(track.attach());
    }); 
});
};

我尝试在 connectVid() 代码中包含未抽象的 AttachRemoteParticipant 函数，在第一个 then(function(...){...}) 的末尾作为 connectVid 外部的调用之后应该像这样发生:

$('#new-twilio-video').click(function(){
    if(localStorage.vidToken == undefined) {
        getVidToken();
        // attachRemoteParticipant();
    } else {
        connectVid();
        // attachRemoteParticipant();
    }
    addVidModal();
});

当然没有注释。使用 console.log('Participant "%s"isconnected to the Room',participant.identity); 记录的内容是正确的，但 console.log(remoteTracks); 产生一个空数组。但是，如果我使用开发工具运行 room.participants.forEach(function(participant) {console.log(Array.from(participant.tracks.values());}) 我收到的正是我想要的我认为问题与在准备好提取值之前发生的 Array.from(...) 调用有关，因此我尝试阻止过早执行，但是我可能是错的。如有任何建议，我们将不胜感激。
编辑:开发工具提供了我想要的数组，但也提供了一个 undefined 作为第二个结果。这会引起问题吗？

Answer 1

出于某种原因，我必须在 setTimeout 之后调用访问 map 值的方法。不知何故，console.log 中显示的值直到稍后才能访问。我无法找到一种优雅的方法来做到这一点(使用简单的 promise 和异步/等待不起作用)，但是好的 ol'setTimeout 做到了这一点。