清除 setInterval 问题答案

【问题标题】：Clearing setInterval issue清除 setInterval 问题
【发布时间】：2014-01-30 18:52:36
【问题描述】：

在没有浏览器滞后的情况下，我在 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 动画替换脚本，但这让它更加滞后

感谢您的帮助！

【问题讨论】：

如果可能的话，你能提供一个 jsfiddle 演示吗？
问题是有相当多的代码。不过我现在就加进去
在loop() 的if 块中添加clearInterval(looping); 作为第一行怎么样。你能试试吗？即clearInterval（循环）；在 if 和 else 块中。
在 setInterval 内启动具有相同间隔持续时间的动画可能会导致问题。时间不够准确，很可能下一个间隔发生时动画还没有完成，所以他们开始排队。更不用说，为什么要以 100 为增量制作动画，而不是只制作完整长度的动画？
@KevinB 这个方法的原因是为了做一个无限循环。我可以理解您的时间安排，但我还没有找到更简单的解决方案。

标签： jquery animation background-image background-position

【解决方案1】：

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

将clearInterval(looping); 添加为loop() 中if 块的第一行。你能试试吗？即 clearInterval(looping); 在 if 和 else 块中。

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();
  }
}

【讨论】：

我发现在函数的第一行加上clearInterval，else块是不必要的。但是谢谢:-)
是的，你可以即兴发挥。