Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

90
Visualizações
Would like to make my progressbar as smooth as possible

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();
                }
            }
        });
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda