jquery - 清除 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();

这不起作用。正如您在上面看到的，我希望动画仅在用户可见 strip 时运行。

同时我正在运行这个动画。

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

让你的循环看起来像这样......

添加 clearInterval(looping); 作为 loop() 中 if block 的第一行。你能尝试一下吗？即 if 和 else block 中的 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();
  }
}