javascript - 事件侦听器因函数而未触发

Question

startCall如果函数正在运行，我有一个不会触发的事件侦听器。

该startCall函数有一个setInterval每秒调用 30 次的函数。

我认为setInterval是阻塞了事件监听器，所以我减少了它调用的次数，但事件监听器仍然没有触发。

它仅在我删除该startCall功能时才有效。为什么会这样？

这是事件侦听器：

document.querySelector(".allowUserButton").addEventListener("click", function () {
                const allowUserEmail = document.querySelector(".allowUser").value;
                const allowUserMessage = document.querySelector(".allowUserMessage");

                if (!allowUserEmail) {
                  allowUserMessage.innerHTML = "Fill in the Allow User field.";
                  return;
                };

                if (!validateEmail(allowUserEmail)) {
                  allowUserMessage.innerHTML = "Invalid Email format.";
                  return;
                };

                allowUserMessage.innerHTML = "Loading...";

                fetch(`/allowUserToCall/${uuid}/${allowUserEmail}`)
                .then(res => res.json())
                .then(data => {
                  const message4 = data.message;

                  allowUserMessage.innerHTML = message4;
                });
              });
            //startCall();

这是startCall方法：

function startCall() {
            const canvasClass = `c${Math.round(Math.random() * 9007199254740991)}`
            const webcamTags = `
              <canvas class="${canvasClass}"></canvas>
              <video style="display: none;" autoplay></video>
            `;  

            document.body.innerHTML += webcamTags;

            const webcamErrorMessage = "Can't access webcam.";
            const sampleFps = 30;
            let video, canvas, ctx;

            if (navigator.getUserMedia) {
              navigator.getUserMedia({
                video: true, 
                audio: false
              }, function (localWebcamStream) {
                video = document.querySelector("video");
                video.srcObject = localWebcamStream;
                canvas = document.querySelector(`.${canvasClass}`);
                ctx = canvas.getContext("2d");

                const windowWidth = window.innerWidth;
                const windowHeight = window.innerHeight;
                const isPhone = windowHeight / windowWidth;
                let canvasDimension;

                if (isPhone) {
                  canvasDimension = windowWidth / 4;
                } else {
                  canvasDimension = windowWidth / 6;
                };
                
                canvas.width = canvasDimension;
                canvas.height = canvasDimension;

                setInterval(() => {
                  ctx.drawImage(video, 0, 0, canvasDimension, canvasDimension);

                  const imageData = ctx.getImageData(0, 0, canvasDimension, canvasDimension);
                  const buffer = imageData.data.buffer;

                  socket.emit("webcamSnapshot", buffer);
                }, 1000 / sampleFps);

                socket.on("incomingWebcamSnapshot", function (bufferDetails) {
                  const {buffer, email} = bufferDetails;

                  console.log(buffer, email);
                });
              }, function () {  
                message.innerHTML = webcamErrorMessage;
              });
            } else {
              message.innerHTML = webcamErrorMessage;
            };
          };

标签： javascriptaddeventlistener