How to make a function run in real time

Asked

Viewed 238 times

0

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

  • Gabriel, have you checked out Videojs? It’s an HTML5 Video Player framework, take a look at how they do these things and draw on them, they have great documentation :)

  • if you use 10ms you will be doing 100x per second (much higher than most monitors which is only 60fps)... I recommend you impose limits like: update only if there is percentage difference (ex: from 34% to 35% you update the width, but from 34% to 34% do nothing). And do not update any more than the support monitor; use this (https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame)

1 answer

0

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.

  • I had knowledge about the setTimeout, the problem is that it calls the function after an interval of time, and not during. In the case you set up, it would run only once when it was not paused. But the progress bar can change as much as paused or not, the "drag to reach a part of the movie". I only used setInterval because of this.

  • @Gabrielarcuri setTimoeut calls once if it is called "outside" if it is within the function every time she finishes she is called again. That is, it will have almost the same effect as setInterval, but will not be making calls "uncontrolled"

Browser other questions tagged

You are not signed in. Login or sign up in order to post.