我有3个div:
<div class="heading-bold"></div>
<div class="heading-raise"></div>
<div class="heading-isis"></div>
我希望这些按顺序出现然后淡出,每个之间有一个定时延迟。然后我需要在无限循环上重复该过程。我已经把一个相当粗略的方法组合在一起,但是为了循环序列而添加setInterval
会导致浏览器最终崩溃。
这是我的代码:
window.onload = function start() {
animate();
}
function animate() {
window.setInterval(animate, 9500);
var delay = 1000;
setTimeout(function() {
$('.heading-bold').css({
"display": "block"
});
}, delay);
var delay = 3000;
setTimeout(function() {
$('.heading-bold').fadeOut(750);
}, delay);
var delay = 3750;
setTimeout(function() {
$('.heading-bold').remove(750);
}, delay);
setTimeout(function() {
$('.heading-raise').css({
"display": "block"
});
}, delay);
var delay = 5750;
setTimeout(function() {
$('.heading-raise').fadeOut(750);
}, delay);
var delay = 6250;
setTimeout(function() {
$('.heading-raise').remove(750);
}, delay);
setTimeout(function() {
$('.heading-isis').css({
"display": "block"
});
}, delay);
var delay = 8750;
setTimeout(function() {
$('.heading-isis').fadeOut(750);
}, delay);
var delay = 9500;
setTimeout(function() {
$('.heading-isis').remove(750);
}, delay);
}
我确信这样做的效率要高得多,但我想知道是否有任何简单的解决方案可以阻止浏览器崩溃。
答案 0 :(得分:2)
问题在于:
function animate () {
window.setInterval(animate, 9500);
每次animate
函数运行时,它都会启动一个间隔计时器再次调用它。这意味着它第一次运行时,将在9500毫秒内运行一次。第二次运行时,它启动另一个间隔计时器,因此在9500ms后它将运行两次。然后4次。然后8 ......等等。
您要么将setInterval
更改为setTimeout
,以便它只在9500ms之后运行一次(然后再次通过另一次调用setTimeout
排队),或者将呼叫转移到setInterval
:
window.onload = function start() {
animate();
setInterval(animate, 9500);
}
答案 1 :(得分:2)
你为什么打电话
window.setInterval(animate, 9500);
在animate函数里面?您正在设置一个间隔(无限),每次运行会自动(无限地)返回,因此它将占用指数多于所需的资源。
像这样重建它;
function animate () {
...
}
window.onload = function start() {
animate();
window.setInterval(animate, 9500);
}
答案 2 :(得分:1)
也许以下内容适合您:
编辑:我通过在动画结束时使fadeIn()和fadeOut()互相调用来添加无限循环。
var interval_ms = 1.5 * 1000;
var fadeIn;
var fadeOut;
fadeIn = function(){
$( "#div1" ).fadeIn( interval_ms,
function() {
$( "#div2" ).fadeIn( interval_ms,
function() {
$( "#div3" ).fadeIn( interval_ms , fadeOut );
}
);
}
);
};
fadeOut = function(){
$( "#div3" ).fadeOut( interval_ms,
function() {
$( "#div2" ).fadeOut( interval_ms,
function() {
$( "#div1" ).fadeOut( interval_ms , fadeIn );
}
);
}
);
};
fadeIn();
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1" class="heading-bold" style="display: none;" > div1 </div>
<div id="div2" class="heading-raise" style="display: none;" > div2 </div>
<div id="div3" class="heading-isis" style="display: none;" > div3 </div>
&#13;