jQuery -常量重复动画超时页面

Question

我有以下几点：

HTML：

<span id="flare-1" class="space-flare"></span>
<span id="flare-2" class="space-flare"></span>

jQuery：

// Animate Stars

jQuery(function() {
    var star = jQuery("#flare-1"), degree = 0, timer;
    var star2 = jQuery("#flare-2"), degree = 0, timer;
    rotate();
    function rotate() {

        star.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
        star.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});  
        star2.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
        star2.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});                      
        timer = setTimeout(function() {
            ++degree; rotate();
        },8);
        setTimeout(function(){
            setInterval(function () {
               star.fadeIn(500).delay(100).fadeOut(1000).delay(4000).fadeIn(1000);
            }, 500);
        },5000); 
        setTimeout(function(){
            setInterval(function () {
               star2.fadeIn(500).delay(100).fadeOut(1000).delay(4000).fadeIn(1000);
            }, 500);
        },3000); 
    }
}); 

以不同的时间间隔激活两颗不同的恒星。如果我把页面打开大约2分钟，浏览器就会超时，说“显示这个页面时出了问题”。

另外，动画逐渐变慢，我不知道为什么，我认为这可能与问题有关。

你知道我做错了什么吗？

这是我的jSFIDDLE

Answer 1

每次调用rotate() (每8ms)，就启动一个新的setTimeout，它启动一个新的setInterval。

仅仅3秒后，第一个375次超时将达到，这将开始375间隔。

我建议连接到setTimeout和setInterval以显示调用了多少次：

window.originalSetTimeout=window.setTimeout;
window.originalSetInterval=window.setInterval;

window.setTimeout=function(func,delay)
{
    console.log("setTimeout");
    return window.originalSetTimeout(func, delay);
};

window.setInterval=function(func,delay)
{
    console.log("setInterval");
    return window.originalSetInterval(func, delay);
};  

您可能想要将fadeIn/fadeOut代码移出体外旋转()：

var star = jQuery("#flare-1");
var star2 = jQuery("#flare-2");
var degree = 0;

rotate();

function rotate() {
    star.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
    star.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});  
    star2.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
    star2.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});                      
}

setInterval(function() {
    ++degree; 
    rotate();
}, 8);

setTimeout(function(){
    setInterval(function () {
       star.fadeIn(500).delay(100).fadeOut(1000).delay(4000).fadeIn(1000);
    }, 500);
}, 5000); 

setTimeout(function(){
    setInterval(function () {
       star2.fadeIn(500).delay(100).fadeOut(1000).delay(4000).fadeIn(1000);
    }, 500);
}, 3000); 

更新小提琴：https://jsfiddle.net/o9etyqgo/1/