清除setInterval問題

Question

我在Safari中運行多個動畫而沒有瀏覽器滯後存在一些困難。我的動畫在所有其他瀏覽器中都很流暢。

我不知道它是否是與我的腳本：

var looping; 

function loop() 
{ 
    var scrollTop = $(window).scrollTop(); 
    if(scrollTop > 300 && scrollTop < 1001) 
    { 
     looping = setInterval(function() 
     { 
      $('.page.active .strip').stop().animate(
      { 
       'background-position': '-=100px' 
      },1000,'linear'); 
     },1000); 
    } 
    else if(scrollTop < 301 || scrollTop > 1000) 
    { 
    clearInterval(looping); 
    $('.page.active .strip').stop(); 
    } 
} 

我試圖做到的，是使一個無限旋轉圖像。

我已經試過兩個以下，以使動畫停止：

clearInterval(looping); 
$('.page.active .strip').stop(); 

不工作。正如你在上面看到的，我希望動畫只在用戶可見條帶後運行。

與此同時我有這個動畫運行。

function loadLandingSlider() 
{ 
    totalImg = $('.page.active #rotating-item-wrapper img').length; 

    rotate = setInterval(
    function() 
    { 
     loadImg(); 
    }, 3000); 
} 

function loadImg() 
{ 
    $('.page.active .rotating-item').fadeOut(1000); 
    $('.page.active #rot' + counter).fadeIn(1000); 

    if(counter == totalImg) counter = 1; 
    else counter ++; 
} 

這僅僅是一個基本的圖像淡出畫廊

我試圖與CSS3動畫更換劇本，而是使它落後更

任何幫助表示讚賞！

Answer 1

讓你的循環是這樣的......

在if塊添加clearInterval(looping);作爲第一行中loop()。你可以試試嗎？即if和else塊中的clearInterval(looping);。

var looping; 

function loop() 
{ 
    var scrollTop = $(window).scrollTop(); 
    clearInterval(looping); 
    if(scrollTop > 300 && scrollTop < 1001) 
    { 
    looping = setInterval(function() 
    { 
     $('.page.active .strip').stop().animate(
     { 
      'background-position': '-=100px' 
     },1000,'linear'); 
    },1000); 
    } 
    else if(scrollTop < 301 || scrollTop > 1000) 
    { 
    $('.page.active .strip').stop(); 
    } 
}