Question

按钮在第一次单击时不会记录所有内容，但在第二次单击时会记录。它几乎跳过了遍历对象的功能。

好吧，我尝试过对大多数函数进行承诺和异步等待，认为这是问题所在，但无济于事。

//按钮代码

const btn = document.querySelector("button");
        btn.disabled = false;
        btn.onclick = function(e) {

          takeASnap()
            .then(toDataURL)
            .then(async function() {
              Object.keys(await returnData).forEach(function(item) {
                console.log(item); // key
                console.log(typeof item);
                console.log(item);

                console.log(returnData[item]); // value
              });
              console.log(await returnData);
            });

        };
      });

HTML

 <div class="window">
 <video></video>
  <button class="snapshot">take a snapshot</button>
 </div>

toDataUrl

async function toDataURL(blob) {
      let reader = new FileReader();
      let b64;
      reader.readAsDataURL(blob);
      reader.onloadend = function() {
        let base64data = reader.result;
        let count = 0;
        let data;

// ChunkSubstr takes thousand character and put into array that is 
// returned
        b64 = chunkSubstr(base64data, 1000);
        console.log("Hllo");
        webSocket(b64);
      };
    }

webSocket函数

这是为返回数据分配来自服务器的值的函数。

async function webSocket(b64) {
      const ws = new WebSocket("ws://192.168.1.70:3000");

      ws.onopen = await function() {
        console.log("Connected");

        b64.forEach(element => {
          ws.send(m_imageNr + " " + element);
          // console.log(element);
        });

        m_imageNr++;

        ws.onmessage = function(event) {
          console.log(typeof returnData);

          returnData.push(event.data);
        };
      };

      return await returnData;
    }

预期结果是，它应该在第一次单击时迭代对象，但仅在第二次单击时才这样做。

EDITTED添加了一些要求的代码。

Answer 1

重构可能会有所帮助：

const btn = document.querySelector("button");
btn.disabled = false;
async function getData() {
   Object.keys(await returnData).forEach(function(item) {
      console.log(item); // key
      console.log(typeof item);
      console.log(item);

      console.log(returnData[item]); // value
   });
   console.log(await returnData);
};

btn.onclick = function(e) {
   takeASnap()
      .then(toDataURL)
      .then(() => await getData());
}

第一次点击不会记录所有信息，但第二次点击会记录

HTML

toDataUrl

webSocket函数

1 个答案: