首页 > 解决方案 > 异步函数内的代码忽略等待属性

问题描述

我的问题是执行顺序:在wait () 函数内部调用的connectToNewUser函数在myPeer.on('call')之前执行,它也在其中。我将代码放入 async\await 函数中,但没有结果,不知何故“用户连接”首先执行。如果我向connectToNewUser添加超时

socket.on('user-connected', userId => {
    setTimeout(connectToNewUser,1000,userId,stream)
  })

,它开始按我的需要工作,但我想使用 await 解决它。哪里有问题?

 const socket = io("/");
const videoGrid = document.getElementById("video-grid");
const myPeer = new Peer(undefined, {
    host: "/",
    port: "3001"
});

const myVideo = document.createElement('video');
myVideo.muted = true;
const peers = {};

navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
}).then(stream => {
    addVideoStream(myVideo, stream);

    wait(myPeer, stream);
});

socket.on("user-disconnected", userId => {
    peers[userId] && peers[userId].close();
});

myPeer.on("open", id => {
    socket.emit("join-room", ROOM_ID, id);
})

const connectToNewUser = (userId, stream) => {
    const call = myPeer.call(userId, stream);
    const video = document.createElement('video');
    
    call.on("stream", userVideoStream => {
        addVideoStream(video, userVideoStream);
    });

    call.on("close", () => {
        video.remove();
    });

    peers[userId] = call
}

const addVideoStream = (video, stream) => {
    video.srcObject = stream;
    video.addEventListener('loadedmetadata', () => {
        video.play();
    })

    videoGrid.append(video);
} 

async function wait(myPeer, stream) {
    await myPeer.on("call", call => {
        call.answer(stream);

        const video = document.createElement("video");

        call.on("stream", userVideoStream => {
            addVideoStream(video, userVideoStream)
        })
    });

    await socket.on("user-connected", userId => {
        connectToNewUser(userId, stream);
    });
}

标签: javascriptasync-await

解决方案



推荐阅读