У меня есть 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();
})
);
Ты можешь обнаруживать, когда настоящий документ активный посредством 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();
}
}
Она 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();
}
});
типов Привета
Выбор, отличный от тех, которые они предоставляли тебе в других ответах, мог бы быть используя функцию 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>