1

Tengo un slider con jQuery que se ejecuta incluso cuando no se esta en la ventana donde se encuentra, esto me consume recursos de procesamiento en vano.

Script

$(document).ready(
$(function() {

//configuracion
var width = 650;
var animationSpeed = 1000;
var pause = 7000;
var currentSlide = 1;

//cache DOM
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.imgSlide', $slider);

var interval;

function startSlider() {
    interval = setInterval(function() {
        $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
            if (++currentSlide === $slides.length) {
                currentSlide = 1;
                $slideContainer.css('margin-left', 0);
            }
        });
    }, pause);
}
function pauseSlider() {
    clearInterval(interval);
}

$slideContainer
    .on('mouseenter', pauseSlider)
    .on('mouseleave', startSlider);

startSlider();


})
);

3 respuestas 3

2

Puedes detectar cuando el documento actual está activo por medio de la API de Visiblidad. Para detectar si el documento está activo basta con hacer esto:

if(!document.hidden) {
     // parar la ejecución de scripts, etc.
}

También es posible añadir un listener a la visibilidad del documento, de tal manera que detecte cuando se ha cambiado/regresado de tab.

document.addEventListener('visibilitychange', onVisibilityChange, false);

function onVisiblityChange(e) {
    if(document.hidden) {
        pauseSlider();
    } else {
        startSlider();
    }
}

Compatibilidad

  • Chrome 33+
  • Firefox 18+
  • IE 10+
  • Opera 12
  • Safari 7+
1

La solución esta en validar si existe o no el slider. Ya que sabes que el slider lo podes identificar con #slider, lo que queda es tan simple como agregar la siguiente condición en tu código

if($('#slider').length > 0) {

}

Por lo cual, te quedaría de la siguiente manera:

$(document).ready(function() {
    if ($('#slider').length > 0) {
        //configuracion
        var width = 650;
        var animationSpeed = 1000;
        var pause = 7000;
        var currentSlide = 1;

        //cache DOM
        var $slider = $('#slider');
        var $slideContainer = $('.slides', $slider);
        var $slides = $('.imgSlide', $slider);

        var interval;

        function startSlider() {
            interval = setInterval(function() {
                $slideContainer.animate({
                    'margin-left': '-=' + width
                }, animationSpeed, function() {
                    if (++currentSlide === $slides.length) {
                        currentSlide = 1;
                        $slideContainer.css('margin-left', 0);
                    }
                });
            }, pause);
        }

        function pauseSlider() {
            clearInterval(interval);
        }

        $slideContainer
          .on('mouseenter', pauseSlider)
          .on('mouseleave', startSlider);

        startSlider();

    }
});

Saludos

1

Una opción diferente a las que te han proporcionado en otras respuestas podría ser usando la función requestAnimationFrame de javascript, la cual te permite ejecutar (digamos que) "recursivamente" el código que necesites ejecutar:

animate();

function animate() {
  requestAnimationFrame(animate);
  // Aqui iría el código que quieres que se ejecute iteradamente...
}

requestAnimationFrame retorna un identificador por cada llamado, el cual puedes usar para detener la ejecución del código en el momento en el que lo necesites:

var requestID;
animate();

function animate() {
  requestID = requestAnimationFrame(animate);
  // El código que quieras ejecutar iteradamente iría aquí.
}

$('#stop').click(function() {
  cancelAnimationFrame(requestID);
});

El problema del código anterior es que no se está controlando cada cuánto tiempo se va a ejecutar el código. Lo único que necesitarías hacer sería "emular" el comportamiento de setTimeout o setInterval. A continuación te presento un ejemplo funcional de como se haría:

Nota: Aquí puedes encontrar información sobre el soporte que tiene requestAnimationFrame en los diferentes navegadores.

(function() {
  var requestID;
  var i = 0;
  var last;
  var interval = 2000; // Intervalo en milisegundos
  animate();

  function animate() {
    requestID = requestAnimationFrame(animate);
    if (canExecuteCode()) {
      // El código que quieres ejecutar:
      var node = document.createElement('DIV');
      node.innerText = ++i;
      document.body.appendChild(node);
    }
  }

  function canExecuteCode() {
    if (!last) {
      last = Date.now();
      return true;
    }
    
    var now = Date.now();
    var elapsed = now - last;
    
    if (elapsed >= interval) {
      last = now;
      return true;
    }
    
    return false;
  }

  document.getElementById('stop').addEventListener('click', function() {
    if (requestID) {
      cancelAnimationFrame(requestID);
      requestID = undefined;
    }
  });

  document.getElementById('continue').addEventListener('click', function() {
    if (!requestID) animate();
  });
})();
<body>
  <button id="stop">Stop!</button>
  <button id="continue">Continue</button>
</body>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.