Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 524
  • Last Modified:

create an infinite loop in jquery

I am learning javascript and jquery and I am trying to create what I thought would be very simple loop.  I am fading background images in and out and looping through six images but when I run my code the browser becomes non responsive.


<script type="text/javascript">
  var aImages = new Array();
  var imageNum = 0;
  aImages[0] = "img/limerick.jpg";
  aImages[1] = "img/launch.jpg";
  aImages[2] = "img/graduates.jpg";
  aImages[3] = "img/portrait.jpg";
  aImages[4] = "img/wedding.jpg";
  aImages[5] = "img/engagement.jpg";
  aImages[6] = "img/wedding2.jpg";
  $(document).ready(function() {
    while (imageNum < 10) {
      if (imageNum > 6) {
        imageNum = 0;
		}
      $("img#bg").attr("src", aImages[imageNum]);
      $("img#bg").load
      $("img#bg").fadeIn(1000);
      setTimeout(function() {$("img#bg").fadeOut(1000);},3000);
      imageNum ++;
      }
	});
</script>

Open in new window

0
iepaul
Asked:
iepaul
1 Solution
 
EyalCommented:
setTimeout is a function that will never stop unless you call clearTimeout

http://www.w3schools.com/js/js_timing.asp
0
 
Pratima PharandeCommented:
<script type="text/javascript">
  var aImages = new Array();
  var imageNum = 1;
  aImages[0] = "img/limerick.jpg";
  aImages[1] = "img/launch.jpg";
  aImages[2] = "img/graduates.jpg";
  aImages[3] = "img/portrait.jpg";
  aImages[4] = "img/wedding.jpg";
  aImages[5] = "img/engagement.jpg";
  aImages[6] = "img/wedding2.jpg";
  $(document).ready(function() {
    while (imageNum < 7) {
     
      $("img#bg").attr("src", aImages[imageNum]);
      $("img#bg").load
      $("img#bg").fadeIn(1000);
      setTimeout(function() {$("img#bg").fadeOut(1000);},3000);
      imageNum ++;
      }
      });
</script>
0
 
EyalCommented:
<script type="text/javascript">
  var aImages = new Array();
  var imageNum = 1;
  aImages[0] = "img/limerick.jpg";
  aImages[1] = "img/launch.jpg";
  aImages[2] = "img/graduates.jpg";
  aImages[3] = "img/portrait.jpg";
  aImages[4] = "img/wedding.jpg";
  aImages[5] = "img/engagement.jpg";
  aImages[6] = "img/wedding2.jpg";
  $(document).ready(function() {
       setTimeout(changeimg,3000)

      });
function changeimg(){
      var img = $("img#bg");
      img.fadeOut(1000);
      if(++imageNum==7)imageNum=0;
      img.attr("src", aImages[imageNum]).load().fadeIn(1000);
}
</script>

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
iepaulAuthor Commented:
eyal thanks your for your code but it does not appear to loop.  it displays the first image then stops.
0
 
dsmileCommented:
Problem lies in line 12 to 15.
Exit condition of the loop is imageNum = 10, but when it is 7, you reset it --> the loop will never end.
Use either suggestion of Pratima or Eyal is fine :)
0
 
iepaulAuthor Commented:
i want to keep the infinite loop.  the exit condition is never expected to be met.  the problem is the browser becomes no responsive.
0
 
Gurvinder Pal SinghCommented:
callMeAgainLater();
function callMeAgainLater()
{
   ...your code here...
   setTimeout( "callMeAgainLater()", 1000 );
}

above code will keep on looping
0
 
EyalCommented:

<script type="text/javascript">
  var aImages = new Array();
  var imageNum = 1;
  aImages[0] = "img/limerick.jpg";
  aImages[1] = "img/launch.jpg";
  aImages[2] = "img/graduates.jpg";
  aImages[3] = "img/portrait.jpg";
  aImages[4] = "img/wedding.jpg";
  aImages[5] = "img/engagement.jpg";
  aImages[6] = "img/wedding2.jpg";
  $(document).ready(function() {
       setTimeout(changeimg,3000)

      });
function changeimg(){
      var img = $("img#bg");
      img.fadeOut(1000);
      if(++imageNum==7)imageNum=0;
      img.attr("src", aImages[imageNum]).load().fadeIn(1000);
      setTimeout(changeimg,3000)
}
</script>

Open in new window

0
 
iepaulAuthor Commented:
Eyal that code works but strange things are happening with the pictures.  A picture appears, fades out, then fades in again.  The next picture appears, fades out and fades in again.

It does loop correctly though.
0
 
EyalCommented:
function changeimg(){
      var img = $("img#bg");
      img.fadeOut(1000', function() {
    // Animation complete.
   if(++imageNum==7)imageNum=0;
      img.attr("src", aImages[imageNum]).load().fadeIn(1000);
      setTimeout(changeimg,3000)
});
     }
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now