JQuery Script looping error

Question

<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
    setInterval(function(){
    var i = 1;
        while(i<3){

             var left = $("#"+i).offset().left;
            $("#"+i).css({'left':left}).animate({'left':'-10000px'},8000);
            if(i == 1){
                i++;
            }
            if(i == 2){
                i--;
            }
        }


    },2500);

});
</script>
</head>

<body>
<div id=myDivWrapper style="overflow:hidden">
<div id=1 style="right:0;width:100%;height:100%;background:url('1.jpg');position:absolute;"></div>
<div id=2 style="right:0;width:100%;height:100%;background:url('2.jpg');">
</div>
<body>
</html>

I'm trying to create a JQuery image slider using while loop. here i is the integer i'm incrementing. I don't want the i to be 3 so the loop will stop. Therefor i used a decision statement for finding if i is 1 increment it and if i is 2 decrement it. But this causes lag on browser and it doesn't work. I know this script is crazy. But can you figure out where I made mistake?

Every 2.5 seconds, you call a function that has a never ending loop, why? — U.P
– U.P, Commented Aug 10, 2013 at 7:08
i think it has something to do with your animation time. Reduce it to <= 2500 and see what happens — Mandeep Jain
– Mandeep Jain, Commented Aug 10, 2013 at 7:26
Why are you using while(i<3) if you "don't want the i to be 3"? If it never gets to 3 the loop will never end... Could you describe what your desired effect is (as seen by the user)? — nnnnnn
– nnnnnn, Commented Aug 10, 2013 at 7:48

Jay Shukla · Accepted Answer · 2013-08-10 07:35:18Z

2

Your problem is here..

if(i == 1){
   i++;
}
if(i == 2){
    i--;
}

See when i is 1, first statement becomes true and then second if will going to be executed so at that time i is 2 so again it decrements value of i. So this is the problem that causes lag on browser. Use else or else if to solve this.

Here it is.

if(i == 1) {
    i++;
}
else {
    i--;
}

OR

if(i == 1) {
   i++;
}
else if(i==2) {
  i--;
}

Both are same and will work for you.

answered Aug 10, 2013 at 7:35

Jay Shukla

5,8368 gold badges35 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

itsazzad · Accepted Answer · 2013-08-10 07:25:24Z

1

Use like below:

    if(i == 1){
        i++;
    }else if(i == 2){
        i--;
    }

You should use else

answered Aug 10, 2013 at 7:25

itsazzad

7,2927 gold badges73 silver badges92 bronze badges

Collectives™ on Stack Overflow

JQuery Script looping error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related