第一次點擊不會記錄所有信息，但第二次點擊會記錄

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;
    }

預期結果是，它應該在第一次單擊時遍歷對象，但僅在第二次單擊時才這樣做。

編輯添加了一些要求的代碼。

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