JQuery setTimeOut while循环

时间:2012-07-19 07:09:08

标签: javascript jquery while-loop settimeout infinite-loop

我的大脑会爆炸......为什么这不起作用?我试图用时间间隔动画几个div并尝试编写更少的代码,但这不起作用

    var cargaCont = function(){
        o = 1;
        var animacion = function(i){
            $('#page2txt'+i).animate({
                height:'20'
            },200,function(){
                $('#page2img'+i).animate({
                    left:'0',
                    right:'0'
                },200,function(){
                    i++;
                    return i;
                });
            });
        }
        while(o < 3){
            setTimeout(function(){o = animacion(o);},200);
        }   
    }

2 个答案:

答案 0 :(得分:1)

此代码存在问题:

while(o < 3){
    setTimeout(function(){o = animacion(o);},200);
} 

是执行延迟setTimeout的函数时,o已经为3,因此对animacion的所有调用都会传递3而不是1和2。

要解决此问题,您应该使用立即函数“本地化”o的值。

while(o < 3){
    //o out here is from cargaCont
    (function(o){
        //override o by naming the passed variable o
        setTimeout(function(){
            o = animacion(o); //now o refers to the local o
        },200);
    }(o)); //execute inner function, passing in o
} 

这使得o中的函数使用的setTimeout绑定到本地函数的o,而不是o的{​​{1}}功能

答案 1 :(得分:0)

我不是百分之百确定你到底想要什么,但我猜你基本上想要循环一些动画,也许是这样:

var cargaCont = function(){
    var i = 1,
        animacion = function(i){
            $('#page2txt'+i).animate({
               height:'20'
           },200,function(){
               $('#page2img'+i).animate({
                   left:'0',
                   right:'0'
               },200,function(){
                   if(i < 3){
                      animacion(++i);
                   }
               });
           });
       };
    animacion(i);
};

根据您的需要进行编辑或发布一些标记以进一步解释。

干杯。