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

72
Visualizações
Running the same setInterval multiple times at once

I am putting together a personal overlay for my stream, using NodeJS sockets and a simple web page, and it has, for each chat message, the player's little character run across the bottom of the screen. So far, this has worked great, but I was trying to look into setting up this to be capable of the same character running across multiple times, mostly for the fun of it. The problem I came across is that when setting a new interval, the old one stops and the character gets frozen in place. I'm hoping to be able to get this to work and hope some help with a revision is available. :)

Here's the code

    function animPlayer(name){
    
    $.get(`/images/players/${name}strip.png`).done(function() { 
        //clearInterval(tID);
        var tID;
        var rID;
        document.getElementById("playercontain").innerHTML += `<p id="image" class='${name}'> </p>`;
        var elemy = document.getElementsByClassName(name);
        var elem = elemy[elemy.length - 1];
        var position = 69;
        var rposition = -100;
        const interval = 150;
        elem.style.backgroundImage = `url('/images/players/${name}strip.png')`;
        elem.style.right = '-100px';
        rID = setInterval (() => {
            elem.style.right = `${rposition}px`;
            if(rposition < 2080){
                rposition += 4;
            } else {
                elem.remove();
                clearInterval(rID);
            }
        }, 2);
        setTimeout(() => {
            elem.style.right = '-100px';
        }, 4000);
        tID = setInterval (() => {
            elem.style.backgroundPosition = `-${position}px 0px`;

            if (position < 138) {
                position = position + 69;
            } else {
                position = 0;
            }
        }, interval);
    }).fail(function() {
        console.log('it busy');
    })
}

For explanation, the code checks for the existence of the player's sprite strip image, and if it exists, it adds the image to the page, then animates it through a JSFiddle interval, as well as shoots it across the screen with a simple style.right assignment, but as stated before, when the player chats again, the original freezes in place. I could have it check for the existence of the image and reset the position, but I personally would like to have multiple running across at once. Please help me, thank you. <3

about 4 years ago · Juan Pablo Isaza
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