How to make a function run in real time

Question

Hello, I’m making a player and would like to know if you have a function that runs full time, or only when such element changes

In case I have that function

function updateTime(){

    var bufferedEnd = view.buffered.end(view.buffered.length- 1);

    videoLoader.style.width = String((bufferedEnd / view.duration) * 100) + '%';

    pctSeek = (view.currentTime / view.duration) * 100;

    progress.style.width = String(pctSeek)+'%';

    currentHour = Math.floor(view.currentTime / 3600);
    currentMin = Math.floor(view.currentTime / 60);
    currentSec = Math.floor(((view.currentTime / 60) % 1) * 60);

    timer.innerHTML = convertTime(currentHour, currentMin, currentSec);
}

That makes the player loading bar update all the time and the video time too

But when I call this function, I call with a setInterval

intervalTimer = setInterval(updateTime, 10);

And this is making the site very slow (by the thousandth of a second).

I tried to leave a longer time, but as the load bar loads along with this function, it was crashing if you were dragging (because it ran every 100 thousandths)

I tried to use the resize() only that it wasn’t either

Answer 1

I will not answer the title, because in fact it is not quite what you need, I will explain to you about the basic differences of setTimeout and setInterval.

As I explained in /a/111149/3635

• setInterval runs deliberately without waiting for the function to finish to start again, i.e. 10 millionths of a second, that is much less than 1 second, the execution is repeated, several calls to the DOM element via innerHTML is if "trampling", the setInterval is generating and generating more and more, without control and without limit

• setTimeout only runs once, ie to call it would have to run again, which would solve your problem, run it after the innerHTML

It’s not the fault of setInterval, it has a specific purpose, but does not suit your case, for most cases setTimeout solve perfectly, it would already solve your problems:

var pausado = true;

function updateTime()
{
    //Se pausado for true então impede outra repetição
    if (pausado) return;

    var bufferedEnd = view.buffered.end(view.buffered.length- 1);

    videoLoader.style.width = String((bufferedEnd / view.duration) * 100) + '%';

    pctSeek = (view.currentTime / view.duration) * 100;

    progress.style.width = String(pctSeek)+'%';

    currentHour = Math.floor(view.currentTime / 3600);
    currentMin = Math.floor(view.currentTime / 60);
    currentSec = Math.floor(((view.currentTime / 60) % 1) * 60);

    timer.innerHTML = convertTime(currentHour, currentMin, currentSec);

    setTimeout(updateTime, 10);
}

function iniciar()
{
    //Só iniciará novamente já estiver pausado, caso contrário não faz nada
    if (pausado) {
        pausado = false;
        updateTime();
    }
}

function pausar()
{
    pausado = true;
}

Then you will have two functions for use, iniciar() to start the execution and pausar() that will stop the execution.