Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Animation of moving bee with help of nested setIntervals functions

    Task: bee that randomly apperiyng on the page, than moving for a while, disappering and so on.
    The problem: after some time the speed of movement of the bee becoming too fast. And, also, bee keeps moving while invisible (what I don`t need).
    To check if the speed of movement somehow connected with the value of bee.style.left I created standalone function that implements moving of the bee to the right:
    Code:
                      var lef = window.setInterval(function (){
                            bee.style.left = parseInt(bee.style.left) + 2 + 'px';
                            document.getElementById('coo').value = bee.style.left;
                            if(parseInt(bee.style.left) >= parseInt(window.innerWidth)){  // if the bee is outside of the page
                                bee.style.left = '0px'; // then back it to the  start
                                //clearInterval(lef); // this is for unlimited movement
                            }
                        }, 100);
    and I saw that the speed of the bee is the same all the time.
    Code:
    Code:
            window.onload = function (){
                var bee = document.getElementById('bee');
                bee.style.left = '0px';
                bee.style.visibility = 'visible';
                window.setInterval(function(){
                    if(bee.style.visibility == 'visible'){
                        bee.style.visibility = 'hidden';
                    } else {
                        var positionX = Math.floor(Math.random() * parseInt((window.innerWidth) - 20));//randomly generated positions for the picture.
                        var positionY = Math.floor(Math.random() * parseInt((window.innerHeight) - 20));//The picture always located inside of the document
                        bee.style.left = positionX + 'px'
                        bee.style.top = positionY + 'px';
                        bee.style.visibility = 'visible';
                        var lef = window.setInterval(function (){
                            bee.style.left = parseInt(bee.style.left) + 2 + 'px';
                            if(parseInt(bee.style.left) >= parseInt(window.innerWidth)){ // if the bee is outside of the page
                                bee.style.left = '0px'; // then back it to the  start
                                clearInterval(lef);
                            }
                        }, 100);
                    }
                },3000);
            }
    Last edited by badcoder2013; 03-09-2013 at 04:25 PM.

  • #2
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    You have something going on what is known as a race condition: You keep adding new setIntervals (what you store in lef), even though the old one hasn't been cleared yet. Move the declaration of the variable lef outside to where you declare bee. Then, right before assigning a new interval to lef, also make sure to clear it just in case it's still there.

  • Users who have thanked Airblader for this post:

    badcoder2013 (03-09-2013)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •