Jump to content
GreenSock

Vitor Amorim

Javascript queue when switch tabs

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys,
 
i have slideshow tween on a page that i'm doing, but everytime that i switch tabs in my browser and stay for a while in this other tab, when i get back to the page, the slideshow accumulates javascript queue and it starts frenetic running the script that did not runned when i was in the other tab, how can i solve this problem?

here is some of my code.

Sorry for the english.
 
Thank you

Diverso.prototype.highlight = function () {
  var actual = parseInt($('.showSlide').attr('id').replace('slide-',''));
  if(actual == $('.slide').length - 1){
    var next = 1;
  }else{
    var next = actual + 1;
  }
  $('.showSlide').removeClass('showSlide');
  $('#slide-'+ next).addClass('showSlide');

  diverso.tl.to($('.boxSlides'), 0.8, {left: '-='+$('.slide').width(),
    onComplete:function(){
      $('.thumbShow').removeClass('thumbShow');
      $('#thumb-'+ next).addClass('thumbShow');
      if(next == 1){
        diverso.tl.to($('.boxSlides'), 0.001, {left: 0, onComplete:function(){
          diverso.highlight();
        }});
      }else{
        diverso.highlight();
      }

    }
  }, "+=5.0");
};
Link to comment
Share on other sites

Hello And Welcome to the GreenSock Forums Victor!

 

You can try to add a focus and blur event on the browser window to check when you give it focus or not. This will also work within tabs or windows:

// check if browser tab has focus		
var notIE = (document.documentMode === undefined);
if (notIE) {

    // checks for Firefox, Chrome, Safari..  NON IE versions
    $(window).on("focusin", function () {
        // code goes here
        diverso.tl.resume();
    }).on("focusout", function () {
        // code goes here
        diverso.tl.pause();
    });

} else {
    
    // checks for IE versions
    if (window.addEventListener) {

        window.addEventListener("focus", function (event) {
            // code goes here
            diverso.tl.resume();
        }, false);
        window.addEventListener("blur", function (event) {
            // code goes here
            diverso.tl.pause();
        }, false);

    } else {

        window.attachEvent("focus", function (event) {
            // code goes here
            diverso.tl.resume();
        });
        window.attachEvent("blur", function (event) {
            // code goes here
            diverso.tl.pause();
        });
    }

}

The above will pause your timelines when the window or tab loses focus, and will resume once the window or tab regains focus.

 

Hope this helps out :)

Link to comment
Share on other sites

I tried that, it works when i change the window, but not when i'm changing tabs :/

Link to comment
Share on other sites

Weird.. i use this and have tested this in Firefox, Chrome, Opera, Safari, IE7, IE8, IE10, and IE11

  • what browser and browser version is it not working on?

to use it.. it requires at least jQuery 1.7 due to use of the on() method.. if you have an earlier jQuery version you will have to change on() to bind().

  • have you tried to add console.log() inside those events, to test if the console is outputting your console.log message?

testing if the events are firing, and outputing in the console with  console.log("focus") and  console.log("blur")

// check if browser tab has focus		
var notIE = (document.documentMode === undefined);
if (notIE) {

    // checks for Firefox, Chrome, Safari..  NON IE versions
    $(window).on("focusin", function () {
        // code goes here
         console.log("focus");
    }).on("focusout", function () {
        // code goes here
        console.log("blur");
    });

} else {
    
    // checks for IE versions
    if (window.addEventListener) {

        window.addEventListener("focus", function (event) {
            // code goes here
             console.log("focus");
        }, false);
        window.addEventListener("blur", function (event) {
            // code goes here
             console.log("blur");
        }, false);

    } else {

        window.attachEvent("focus", function (event) {
            // code goes here
             console.log("focus");
        });
        window.attachEvent("blur", function (event) {
            // code goes here
            console.log("blur");
        });
    }

}

try this and look in the console in your browser inspector for the console.log() messages too make sure the events are firing.

 

This way you can narrow down if the events are firing, versus maybe if the code inside it is having an issue. :D

Link to comment
Share on other sites

I updated the chrome and it worked, thank you very much Jonathan.

I was geting crazy on this :D

  • Like 1
Link to comment
Share on other sites

no worries.. glad you got it figured out Victor! :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×