7

Tenho uma função JavaScript que faz um loop, ela controla um elemento da página que troca de lugar com outro, meu objetivo é quando sair da página, essa função pare e só volte quando a página for aberta de novo

Função:

function rodarLogos() {
    setTimeout(function () {
        $div = $("#logo-1 .hex-warper");

        $baixo = $div.find('.hexagon-parceiros-emBaixo');
        $central = $div.find('.hexagon-parceiros-central');
        $cima = $div.find('.hexagon-parceiros-emCima');

        setTimeout(function () {
            $baixo.toggleClass('hexagon-parceiros-central hexagon-parceiros-emBaixo').parent().toggleClass('z-index-3  z-index-2 box-adicional box-adicional-50');
            $central.toggleClass('hexagon-parceiros-emCima hexagon-parceiros-central').parent().toggleClass('z-index-2  z-index-1 box-adicional-50 box-adicional');
            $cima.toggleClass('hexagon-parceiros-emBaixo hexagon-parceiros-emCima').parent().toggleClass('z-index-1  z-index-3');

        }, 500);
        rodarLogosPagamentos();
    }, 5000);
}

function rodarLogosPagamentos() {
    setTimeout(function () {
        $div = $("#pagemento-1 .hex-warper");

        $baixo = $div.find('.hexagon-parceiros-emBaixo');
        $central = $div.find('.hexagon-parceiros-central');
        $direita = $div.find('.hexagon-parceiros-direita');
        $cima = $div.find('.hexagon-parceiros-emCima');

        setTimeout(function () {
            $baixo.toggleClass('hexagon-parceiros-central hexagon-parceiros-emBaixo').parent().toggleClass('z-index-4  z-index-3 box-adicional box-adicional-50');
            $central.toggleClass('hexagon-parceiros-emCima hexagon-parceiros-central').parent().toggleClass('z-index-3  z-index-1 box-adicional-50 box-adicional');
            $cima.toggleClass('hexagon-parceiros-direita hexagon-parceiros-emCima').parent().toggleClass('z-index-1  z-index-2');
            $direita.toggleClass('hexagon-parceiros-direita hexagon-parceiros-emBaixo').parent().toggleClass('z-index-2  z-index-4');

        }, 500);
        rodarLogos();
    }, 5000);
}

Exemplo: Tenho a guia do stack overflow ativa e a do google, quando eu sair da do stack e ir para o google teria que pausar e quando voltar para o stack o loop retornaria

7
  • Pode guardar os dados do loop no localStorage, ou nos Cookies 22/07/2019 às 18:05
  • Você poderia fornecer mais informações sobre sua dúvida? Se "Sair da página" significa fechá-la, você pode fazer como o Vinícius comentou e usar Local Storage para seguir de onde parou. Se "Sair da página" significa minimizá-la ou trocar de aba você poderia ouvir o evento visibilitychange do document (exemplos). De qualquer maneira, você precisaria esclarecer melhor seu problema para que possamos ajudá-lo. 22/07/2019 às 18:12
  • sair da pagina eu digo trocar a tab ativa no navegador
    – Lucas
    22/07/2019 às 18:20
  • Nesse caso de troca de aba, da pra usar uma API chamada Page Visibility. developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API 22/07/2019 às 18:21
  • acho que eu ainda não consegui me fazer entender, a aba do navegador, tipo tenho a guia do stack overflow ativa e a do google, quando eu sair da do stack e ir para o google teria que pausar
    – Lucas
    22/07/2019 às 18:22

1 Resposta 1

9
+50

O setTimeout não pode ser pausado, ou você cancela ou inicia ele. Nesse caso você pode cancelar os 4 setTimeout's usando o evento window.blur e chamar novamente as funções no evento window.focus.

Para isso é preciso criar variáveis globais para cada setTimeout. No window.blur você usa clearTimeout() para cada temporizador para cancelá-los, e no window.focus você chama uma das funções (ou as duas, não sei como você está fazendo nessa parte).

Declarando as variáveis:

var timer_1,
    timer_2,
    timer_3,
    timer_4;

Cada temporizador terá um nome (são 4), por exemplo, o primeiro será:

timer_1 = setTimeout(function () {...

Cancelando os timers no onblur:

window.onblur = function(){
   clearTimeout(timer_1);
   clearTimeout(timer_2);
   clearTimeout(timer_3);
   clearTimeout(timer_4);
}

Chamando a função no onfocus:

window.onfocus = rodarLogos;

Se for chamar as duas funções ao mesmo tempo, seria:

window.onfocus = function(){
   rodarLogos();
   rodarLogosPagamentos();
}

O código todo ficaria assim:

// declarando as variáveis
var timer_1,
    timer_2,
    timer_3,
    timer_4;

function rodarLogos() {
    timer_1 = setTimeout(function () {
        $div = $("#logo-1 .hex-warper");

        $baixo = $div.find('.hexagon-parceiros-emBaixo');
        $central = $div.find('.hexagon-parceiros-central');
        $cima = $div.find('.hexagon-parceiros-emCima');

        timer_2 = setTimeout(function () {
            $baixo.toggleClass('hexagon-parceiros-central hexagon-parceiros-emBaixo').parent().toggleClass('z-index-3  z-index-2 box-adicional box-adicional-50');
            $central.toggleClass('hexagon-parceiros-emCima hexagon-parceiros-central').parent().toggleClass('z-index-2  z-index-1 box-adicional-50 box-adicional');
            $cima.toggleClass('hexagon-parceiros-emBaixo hexagon-parceiros-emCima').parent().toggleClass('z-index-1  z-index-3');
        }, 500);
        rodarLogosPagamentos();
    }, 5000);
}

function rodarLogosPagamentos() {
    timer_3 = setTimeout(function () {
        $div = $("#pagemento-1 .hex-warper");

        $baixo = $div.find('.hexagon-parceiros-emBaixo');
        $central = $div.find('.hexagon-parceiros-central');
        $direita = $div.find('.hexagon-parceiros-direita');
        $cima = $div.find('.hexagon-parceiros-emCima');


        timer_4 = setTimeout(function () {
            $baixo.toggleClass('hexagon-parceiros-central hexagon-parceiros-emBaixo').parent().toggleClass('z-index-4  z-index-3 box-adicional box-adicional-50');
            $central.toggleClass('hexagon-parceiros-emCima hexagon-parceiros-central').parent().toggleClass('z-index-3  z-index-1 box-adicional-50 box-adicional');
            $cima.toggleClass('hexagon-parceiros-direita hexagon-parceiros-emCima').parent().toggleClass('z-index-1  z-index-2');
            $direita.toggleClass('hexagon-parceiros-direita hexagon-parceiros-emBaixo').parent().toggleClass('z-index-2  z-index-4');
        }, 500);
        rodarLogos();
    }, 5000);
}

window.onblur = function(){
   clearTimeout(timer_1);
   clearTimeout(timer_2);
   clearTimeout(timer_3);
   clearTimeout(timer_4);
}

window.onfocus = rodarLogos;

O problema é que os eventos onblur e onfocus não garantem 100% que a aba está ativa, porque se você clicar na barra de endereços do navegador, por exemplo, irá disparar o blur e cancelar os timers. Mas seria uma forma de fazer o que pretende.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .