防止jQuery中的无限循环

应该很简单。我希望jQuery动画在1个循环后停止运行，而不是无限循环

这绝对是一个简单的东西，但这是我很久以前帮助过的代码，我一辈子都搞不清楚它为什么会循环

谢谢

jsFiddle： 以及守则：

function move(jElem, bUp, iSpeed) {
    jElem.animate(
        {
         opacity: (bUp ? '+' : '-') + '0.1',
         width: (bUp ? '+' : '-') + '=200',
         height: (bUp ? '+' : '-') + '=200'},
        iSpeed,
        function() {
            move(jElem, !bUp, iSpeed);
        }
    );
}

$(document).ready(function() {
    $('.navImage').each(function(iIndex, jElem) {
        // get random delay
        var iTime = Math.floor(Math.random() * 1000);
        // get random speed
        var iSpeed = Math.floor(Math.random() * 1000) + 1500;
        setTimeout(
            function() {
                move($(jElem), true, iSpeed);
            }, 
            iTime
        );
    });
});

---

您可以让move函数递归调用move函数。导致堆栈溢出的好方法

移动函数递归调用移动函数。导致堆栈溢出的好方法

只需删除再次调用move的动画上的回调

function move(jElem, bUp, iSpeed) {
    jElem.animate(
        {
           opacity: (bUp ? '+' : '-') + '0.1',
           width: (bUp ? '+' : '-') + '=200',
           height: (bUp ? '+' : '-') + '=200'
        },iSpeed
    );
}

你以前也这么做过

function move(jElem, bUp, iSpeed) {
    jElem.animate(
      {
         opacity: (bUp ? '+' : '-') + '0.1',
         width: (bUp ? '+' : '-') + '=200',
         height: (bUp ? '+' : '-') + '=200'},
         iSpeed,
         function() {                      
            move(jElem, !bUp, iSpeed);   // move will be called at the end of animate recursively
        }
      }
    );
}

---

只需删除再次调用move的动画上的回调

function move(jElem, bUp, iSpeed) {
    jElem.animate(
        {
           opacity: (bUp ? '+' : '-') + '0.1',
           width: (bUp ? '+' : '-') + '=200',
           height: (bUp ? '+' : '-') + '=200'
        },iSpeed
    );
}

你以前也这么做过

function move(jElem, bUp, iSpeed) {
    jElem.animate(
      {
         opacity: (bUp ? '+' : '-') + '0.1',
         width: (bUp ? '+' : '-') + '=200',
         height: (bUp ? '+' : '-') + '=200'},
         iSpeed,
         function() {                      
            move(jElem, !bUp, iSpeed);   // move will be called at the end of animate recursively
        }
      }
    );
}

---

如果希望它循环1次，只需添加一个增量为1的变量。您可以更改行

loopTimes<1

，以使函数在您需要的任意数量的循环之后停止循环

function move(jElem, bUp, iSpeed, loopTimes) {
    jElem.animate(
        {
         opacity: (bUp ? '+' : '-') + '0.1',
         width: (bUp ? '+' : '-') + '=200',
         height: (bUp ? '+' : '-') + '=200'},
        iSpeed,
                    if(loopTimes < 1)
                    {
                       loopTimes++;
                       function() {
                           move(jElem, !bUp, iSpeed, loopTimes);
                       }
                    }
    );
}

$(document).ready(function() {
    $('.navImage').each(function(iIndex, jElem) {
        // get random delay
        var iTime = Math.floor(Math.random() * 1000);
        // get random speed
        var iSpeed = Math.floor(Math.random() * 1000) + 1500;
        setTimeout(
            function() {
                move($(jElem), true, iSpeed, 0);
            }, 
            iTime
        );
    });
});

功能移动（jElem、bUp、iSpeed、loopTimes）{
杰勒姆(
{
不透明度：（bUp？'+'：'-'）+'0.1'，
宽度：（bUp？'+'：'-'）+'=200'，
高度：（bUp？'+'：'-'）+'=200'}，
iSpeed，
if（循环次数<1）
{
循环次数++；
函数（）{
移动（jElem，！bUp，iSpeed，loopTimes）；
}
}
);
}
$（文档）.ready（函数（）{
$（'.navImage'）。每个（函数（iIndex，jElem）{
//获得随机延迟
var iTime=Math.floor（Math.random（）*1000）；
//获得随机速度
var iSpeed=Math.floor（Math.random（）*1000）+1500；
设置超时(
函数（）{
移动（$（jElem），true，iSpeed，0）；
}, 
时间
);
});
});

如果希望它循环1次，只需添加一个增量为1的变量即可。您可以更改行

loopTimes<1

，以使函数在您需要的任意数量的循环之后停止循环

function move(jElem, bUp, iSpeed, loopTimes) {
    jElem.animate(
        {
         opacity: (bUp ? '+' : '-') + '0.1',
         width: (bUp ? '+' : '-') + '=200',
         height: (bUp ? '+' : '-') + '=200'},
        iSpeed,
                    if(loopTimes < 1)
                    {
                       loopTimes++;
                       function() {
                           move(jElem, !bUp, iSpeed, loopTimes);
                       }
                    }
    );
}

$(document).ready(function() {
    $('.navImage').each(function(iIndex, jElem) {
        // get random delay
        var iTime = Math.floor(Math.random() * 1000);
        // get random speed
        var iSpeed = Math.floor(Math.random() * 1000) + 1500;
        setTimeout(
            function() {
                move($(jElem), true, iSpeed, 0);
            }, 
            iTime
        );
    });
});

功能移动（jElem、bUp、iSpeed、loopTimes）{
杰勒姆(
{
不透明度：（bUp？'+'：'-'）+'0.1'，
宽度：（bUp？'+'：'-'）+'=200'，
高度：（bUp？'+'：'-'）+'=200'}，
iSpeed，
if（循环次数<1）
{
循环次数++；
函数（）{
移动（jElem，！bUp，iSpeed，loopTimes）；
}
}
);
}
$（文档）.ready（函数（）{
$（'.navImage'）。每个（函数（iIndex，jElem）{
//获得随机延迟
var iTime=Math.floor（Math.random（）*1000）；
//获得随机速度
var iSpeed=Math.floor（Math.random（）*1000）+1500；
设置超时(
函数（）{
移动（$（jElem），true，iSpeed，0）；
}, 
时间
);
});
});

这不是只运行一次函数吗？我以为OP想要循环函数一次（总共两次），然后停止，尽管我可能误解了。这不是只运行函数一次吗？我以为OP想要循环函数一次（意味着总共两次），然后停止，尽管我可能误解了。事实上，现在我看到它，我认为在动画调用中这样做的语法是错误的，但是像这样传递一个变量是一个普遍的概念。实际上现在我看到了它，我认为在动画调用中这样做的语法是错误的，但是像这样传递一个变量是普遍的概念。