setTimeout speeds up with multiple tabs

Question

I’m having a setTimeout problem similar to this one. But that solution doesn\'t help me since I can’t use php in my file.

My site has a slider with a list of images

Answer 1

My suspicion is that the browser queues input events like 'click' but only fires them when the tab where the event occurs actually has focus.

Perhaps you should try calling your click callbacks directly instead of using trigger('click').

Something like this:

spotlight: {
    i: 0,
   timeOutSpotlight: null,
   clickFunc: function(element) {

       // do stuff here to count and move images

       // Clear timeout
       clearTimeout(spotlight.timeOutSpotlight);

       // Some stuff here to calculate next item

       // Call next spotlight in 8 seconds
       spotlight.timeOutSpotlight = setTimeout(function () {
            spotlight.animate(spotlight.i);
       }, 8000);
   },

   init: function()
   {

       $('#spotlight .controls a').click(function (e) {

           // Don't follow the link
           e.preventDefault();

           spotlight.clickFunc(this);
       });

       // Select first item
       spotlight.clickFunc($('#spotlight .controls a.next:first'));
   },

   animate: function(i)
   {
       var element = $('#spotlight .controls li:eq('+spotlight.i+') a.next');
       spotlight.clickFunc(element);
   }
}