Останавливать язык сценариев JavaScript, когда он не или выходит из окна

У меня есть slider с jQuery, что работает даже, когда не в окне, где он находится, это тратит мне ресурсы обработки впустую.

Рукописный шрифт

$(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();


})
);
1
задан 10.09.2016, 20:18
3 ответа

Ты можешь обнаруживать, когда настоящий документ активный посредством API Visiblidad. Чтобы обнаруживать, если документ активный, достаточно делать это:

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

Также возможно добавлять listener к видимости документа, таким образом что я обнаружил, когда есться измененный / возвращаться tab.

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

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

Совместимость

  • Chrome 33 +
  • Firefox 18 +
  • IE 10 +
  • Произведи 12
  • Safari 7 +
2
ответ дан 24.11.2019, 13:26

Она soluciГіn состой в том, чтобы санкционировать, если существует или нет slider. Так как ты знаешь, что ты обрезал slider, идентифицировать с #slider, что остается, - это так просто как добавлять следующую condiciГіn в тебе cГіdigo

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

}

, Из-за чего, тебя quedarГ - в следующего способа:

$(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();

    }
});

типов Привета

1
ответ дан 24.11.2019, 13:26

Выбор, отличный от тех, которые они предоставляли тебе в других ответах, мог бы быть используя функцию requestAnimationFrame javascript, которую он позволяет тебе выполнять (давайте говорить, что) "recursivamente" код, который ты нуждаешься в том, чтобы выполнить:

animate();

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

requestAnimationFrame возврати идентификатора из-за каждого так называемого, которого ты можешь использовать, чтобы останавливать выполнение кода в моменте, в котором ты нуждаешься в этом:

var requestID;
animate();

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

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

Проблема предыдущего кода состоит в том, что оно не контролируется каждый как долго, будет работать код. Единственное, что ты нуждался бы в том, чтобы сделать, состояло бы в том, чтобы "состязаться" поведение setTimeout или setInterval. Далее тебя представил функциональный пример, как он был бы сделан:

Заметь: Здесь ты можешь находить информацию об опоре, которая у него есть requestAnimationFrame в различных браузерах.

(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>
1
ответ дан 24.11.2019, 13:26