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

Posted 2023-05-09

【中文标题】访问 Javascript 映射中的值时出现问题，函数执行顺序可能存在问题

【英文标题】：Issues accessing values in a Javascript map, possible issue with function execution order

【发布时间】：2018-02-07 05:08:03

【问题描述】：

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

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());
    ); 
);
;

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

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

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

【参考方案1】：

由于某种原因，我不得不在 setTimeout 之后调用我的方法来访问地图值。不知何故，console.log 中出现的值直到稍后才能访问。我想不出一种优雅的方式来做到这一点（使用简单的承诺和 async / await 不起作用）但是好的 ol' setTimeout 做到了。