/Result got printed. But don't understand why its showing [[PromiseState]]: "rejected", it should be "fulfilled", what was the mistake ,i made in the code??/
let counterElement = document.querySelector(".counter");
const promiseCheck = new Promise((resolve, reject) => {
let Timer = setInterval(() => {
var runner = parseInt(document.querySelector(".counter").innerText);
counterElement.innerText = runner - 1;
if (runner === 0) {
clearInterval(Timer);
resolve((counterElement.innerText = "Happy Morning"));
}else{
reject("wht going wrong")
}
// console.log(runner)
}, 1000);
});
console.log(promiseCheck);
promiseCheck
.then((data) => console.log(data))
.catch((errData) => console.log(errData));
index.html
<h1 class="counter">10</h1>
You can use requestAnimationFrame to achieve this result cleanly. It works like setTimeout and setInterval (which could also be employed on those lines).
const timer = document.getElementById("time");
var startTime = null;
var endTime = null;
function changeTimer() {
if (startTime === null) {
startTime = Date.now();
/* Set up the start time to be 11 seconds (11,000 ms)
in the future so it displays 10 for a whole second */
endTime = startTime + 11000;
requestAnimationFrame(changeTimer);
return;
}
let nValue = Date.now();
let tValue = (nValue < endTime) ? endTime - nValue : 0;
let mtValue = tValue / 1000;
let mtiValue = parseInt(mtValue);
if (mtiValue < 1) {
timer.innerText = "Happy Morning";
return;
}
timer.innerText = mtiValue;
requestAnimationFrame(changeTimer);
return;
}
changeTimer();<h1 class="counter" id="time">10</h1>