How do I pause a script when I leave the page?

Asked

Viewed 190 times

7

I have a Javascript function that loops, it controls one element of the page that switches places with another, my goal is when you leave the page, this function stops and only comes back when the page opens again

Function:

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);
}

Example: I have the stack overflow guide active and google, when I exit the stack and go to google would have to pause and when back to the stack the loop would return

javascript jquery

  • You can store the loop data in your localStorage, or in Cookies

  • Could you provide more information about your question? If "Leave the page" means close it, you can do as Vinicius commented and use Local Storage to follow where you left off. If "Leave Page" means to minimize or change tab you could listen to the event visibilitychange of document (examples). Anyway, you would need to clarify your problem better so that we can help you.

  • exit the page I say change the tab active in the browser

  • In this case, you can use an API called Page Visibility. https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

  • I guess I still can’t make myself understand, the browser tab, like I have the stack overflow tab active and the google one, when I leave the stack and go to google would have to pause

  • I get it, and using this API you can do exactly what you want to do. Here is an example: https://codepen.io/MSEdgeDev/pen/eZGGbX

  • that’s right, put that there in an answer that I accept

Show 2 more comments

1 answer

9


The setTimeout cannot be paused, or you cancel or start it. In this case you can cancel the 4 setTimeout’s using the event window.blur and recall functions in the event window.focus.

For this we need to create global variables for each setTimeout. In the window.blur you use clearTimeout() for each timer to cancel them, and window.focus you call one of the functions (or both, I don’t know how you’re doing in this part).

Declaring the variables:

var timer_1,
    timer_2,
    timer_3,
    timer_4;

Each timer will have a name (are 4), for example, the first one will be:

timer_1 = setTimeout(function () {...

Canceling the timers on onblur:

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

Calling the function on onfocus:

window.onfocus = rodarLogos;

If you were to call both functions at the same time, it would be:

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

The whole code would look like this:

// 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;

The problem is that events onblur and onfocus do not guarantee 100% that the tab is active, because if you click on the address bar of the browser, for example, will fire Blur and cancel timers. But it would be a way to do what you want.

Browser other questions tagged javascript jquery

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