We Keep Coding

How to start and stop timer countdown by given users input value Using Js?

var hoursCounter = document.getElementById('hours-counter')
var minutesCounter = document.getElementById('minutes-counter')
var secondsCounter = document.getElementById('seconds-counter')
var hoursInput = document.getElementById('hours-input')
var minutesInput = document.getElementById('minutes-input')
var secondsInput = document.getElementById('seconds-input')
function setCountdownTimer() {
// code to set the timer values
hoursCounter.innerText = hoursInput.value
minutesCounter.innerText = minutesInput.value
secondsCounter.innerText = secondsInput.value
}
function startTimer() {
//code to start the Timer
}
function stopTimer() {
// code to stop the timer
}
`I'm a beginner in Js....! I manage to show the input values but confused in hours, minutes, seconds....!!
Thanks for help...`

Javascript eventListener inside while loop

I am trying to figure out whether it is possible in Javascript to implement an eventListener into a while loop which can pass a value to a variable inside the loop. I need this to cancel an infinite loop which continiously should send a data frame to a TCP-socket (watchdog). When the socket is closed the loop should end. I use a webworker for this purpose, but it does not work.
Here is the code:
// WebWorker with infinite loop
var check = "true";
let i = 0;
let j = 0;
var returnedEvent;
while (check) {
self.postMessage(i);
onmessage = (event) => {
returnedEvent = event.data;
console.log("worker: " + event.data);
let check = returnedEvent;
}
sleep(100);
}
console.log("loop completed");
function sleep(delay) {
var start = new Date().getTime();
while (new Date().getTime() < start + delay);
}

Setting image src is not async in setInterval

I am creating an animation by using setInterval.
var roman_numeral = document.getElementById('roman_numeral');
var i = 1
var generation = 1
var preload;
setInterval( async function (a) {
roman_numeral.innerHTML = romanize(i);
console.log(i);
if(i == 1){
preload = new Preloader(generation+1, "generation")
console.log("The code stops here");
//The code waits here; Seems like synchronus
}
i++
if(i == 1000){
i = 1;
generation ++;
preload.add()
}
if(generation == 1035){
i = 1;
generation = 1
}
}, 10)
I made a class for preloading images, but when creating a new instance of the class, the setInterval seems to run synchronus.
class Preloader {
constructor(gen, attach_id) {
this.gen = gen
this.attach_id = attach_id
this.preload();
}
async preload() {
let container = document.getElementById("generation_animation");
let preload_img = document.createElement("img");
preload_img.style.display = "none";
preload_img.style.width = "0px";
preload_img.id= "preload_generation";
preload_img.setAttribute("loading", "lazy")
container.appendChild(preload_img);
preload_img.src = "res/img/Generations/" + this.gen.toString() + ".png";
container.appendChild(preload_img)
console.log("aaaaaaaa");
}
add() {
let previous = document.getElementById("generation")
let current = document.getElementById("preload_generation");
current.style.width = "50%";
current.style.display = "";
current.classList.add("generations_class");
current.id = "generation";
previous.remove();
}
}
I want to load the image while performing the setInterval loop. How would i do that?

Convert a sync js function with blocking for loop for websocket updates to html table to async - JS/JQuery

I have a sync function which is blocking the DOM causing updates to slow down in javascript. Is it possible to convert it to an async function?
function setBids(gapPrice)
{
var startBuyPrice = this.bid
gapPrice=parseFloat(gapPrice)
var showMaximum = 15
var startBuyViewPrice = Math.floor(startBuyPrice/gapPrice)*gapPrice
var tmpOrder = {price:null,size:null,total: null}
var currentBuyViewPrice = startBuyViewPrice
var totalBuy=0;
var buys="";
var cntShow = 0
for(var price = startBuyPrice;cntShow<showMaximum;price -= 0.5)
{
if(this.orderBook[price]==undefined)
continue
var tmpSize = this.orderBook[price].size;
if(currentBuyViewPrice>price)
{
currentBuyViewPrice -= gapPrice
tmpOrder['size'] = new Intl.NumberFormat('en-US').format(tmpOrder['size'])
tmpOrder['total'] = new Intl.NumberFormat('en-US').format(totalBuy)
tmpOrder['price'] = new Intl.NumberFormat('en-US').format(tmpOrder['price'].toFixed(1))
if(tmpOrder['price'].indexOf('.')==-1)
tmpOrder['price'] += '.0'
buys+='<tr><td style="color:white !important;">'+tmpOrder['total']+'</td><td style="color:white !important;">'+tmpOrder['size']+'</td><td>'+tmpOrder['price']+'</td></tr>'
tmpOrder = {price:null,size:null,total: null}
cntShow += 1
}
totalBuy+=tmpSize;
if(tmpOrder['price']==null)
{
tmpOrder['price'] = currentBuyViewPrice
tmpOrder['size'] = tmpSize
}
else
{
tmpOrder['size'] += tmpSize
}
}
$(".orderbook-table-bids tbody").html(buys)
}
When websockets update come, this function is called frequently, setting showMaximum to 1 does not have an issue because the loop does not block, anything above 1 causes the page to hang.
Thanks in advance.

How can I get the "click" function in this code to repeat?

This code executes the "Click" function, but only one time. I would like it to repeated the click function until the timeout occurs.
I wanted to try setInterval instead of setTimeout, but was afraid I would create a race condition.
var M = 12; // january=1
var d = 29; // 1st=1
var h = 11; // 24h time
var m = 12;
var s = 0;
// How long after the target to stop clicking, in milliseconds.
var duration = 100000;
// How long prior to the start time to click, in milliseconds, to
// account for network latency.
var networkLatency = 150;
// HTML ID of the button to click.
var element = "btnbookdates";
// =====================================
// End configuration section
// =====================================
function getMillisecondsLeft() {
var nowDate = new Date();
var targetDate = new Date(y,M-1,d,h,m,s);
return targetDate - nowDate;
}
function click() {
var button = document.getElementById('btnbookdates');
if ( button ) {
window.console.log('clicked at '+getMillisecondsLeft());
button.click();
} else {
window.console.log('nothing to click at '+getMillisecondsLeft());
}
}
if (getMillisecondsLeft() > 0) {
window.console.log('queueing at '+getMillisecondsLeft());
setTimeout(click, getMillisecondsLeft() - networkLatency);
} else if (-getMillisecondsLeft() <= duration) {
click();
} else {
window.console.log('all done at '+getMillisecondsLeft());
}```

If I understood your question correctly, you want the click to stop when everything is done, i.e the else part at the end. You could try something like this:
var M = 12; // january=1
var d = 29; // 1st=1
var h = 11; // 24h time
var m = 12;
var s = 0;
// How long after the target to stop clicking, in milliseconds.
var duration = 100000;
// How long prior to the start time to click, in milliseconds, to
// account for network latency.
var networkLatency = 150;
// HTML ID of the button to click.
var element = "btnbookdates";
// =====================================
// End configuration section
// =====================================
function getMillisecondsLeft() {
var nowDate = new Date();
var targetDate = new Date(y,M-1,d,h,m,s);
return targetDate - nowDate;
}
function click() {
var button = document.getElementById('btnbookdates');
if ( button ) {
window.console.log('clicked at '+getMillisecondsLeft());
button.click();
} else {
window.console.log('nothing to click at '+getMillisecondsLeft());
}
}
var timer ={};
if (getMillisecondsLeft() > 0) {
window.console.log('queueing at '+getMillisecondsLeft());
timer = setInterval(click, getMillisecondsLeft() - networkLatency);
} else if (-getMillisecondsLeft() <= duration) {
click();
} else {
clearInterval(timer);
window.console.log('all done at '+getMillisecondsLeft());
}