Issue with button logging on second click instead of first, skipping object iteration function.
I attempted using promises and async await on functions to solve this issue, but without success.
// Button Code
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 Function
This function assigns the value of return data received from a server.
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;
}
Expected behavior is for object iteration to occur on first click, rather than waiting until the second click.
UPDATE: Included requested code.