Can anyone help me make this progessbar smoother?
This is my javascript code for the progressbar. I hope you can do something with it and help me with it. I would like to improve the smoothness because it is very stuttering at a higher runtime.
window.addEventListener('message', (event) => {
var item = event.data;
if (item !== undefined && item.type === "ui") {
if (item.display === true) {
$(".container").fadeIn(700);
var start = new Date();
var title = item.title;
var maxTime = item.time;
var text = item.text;
var timeoutVal = Math.floor(maxTime/100);
animateUpdate();
$('#notifyMsg').text(text);
$('#notifyHead').text(title);
function updateProgress(percentage) {
$('#progb').css("width", percentage + "%");
}
function animateUpdate() {
var now = new Date();
var timeDiff = now.getTime() - start.getTime();
var perc = Math.round((timeDiff/maxTime)*100);
if (perc <= 100) {
updateProgress(perc);
setTimeout(animateUpdate, timeoutVal);
} else {
$(".container").fadeOut(700);
}
}
} else {
$("#container").hide();
}
}
});
You should use window.requestAnimationFrame instead of setTimeout. This function runs on every animation cycle.
And adjust your animateUpdate function.
function animateUpdate() {
var now = new Date();
var timeDiff = now.getTime() - start.getTime();
var perc = Math.round((timeDiff/maxTime)*100);
if (perc <= 100) {
updateProgress(perc);
// Changed this line
window.requestAnimationFrame(animateUpdate)
} else {
$(".container").fadeOut(700);
}
}
Here are the docs of window.requestAnimationFrame.