Javascript: nested loops?

Question

I'd like to achieve an animation/sequence like this:

the animation starts with a loop (imagine a car moving from x1 to x2) then a pause of 1 second then again the animation (imagine a car moving from x2 to x3 etc)

the car loop is achieved adding 1px to the car left: value

but i cant figure out the nested loop how should work

i'm trying to do ti only using setInterval, no jquery

UPDATE: sorry i wasnt clear

but assume we have

var animation = setInterval(car_moves, 10);

how do i trigger this animation every 2 seconds, and the animation should last 0.5sec ?

the car loop if for instance achieved adding 1px to the car left: valuecan you explain what this means ??? — Ved
– Ved, Commented Feb 2, 2012 at 5:54
If you want a hint take a look at using a while loop. That would allow you to run the animation until the car has gone a specified distance. — Devin M
– Devin M, Commented Feb 2, 2012 at 5:55
yes, but i'd rather see how it works in pure javascirpt with no delay() — Francesco
– Francesco, Commented Feb 2, 2012 at 5:56
easy enough, when you mean x1 to x2, do you mean from 1 to 2 horizontally? — Matt Lo
– Matt Lo, Commented Feb 2, 2012 at 5:58

Cheery · Accepted Answer · 2012-02-02 06:56:03Z

2

Look, this is done with jQuery http://jsfiddle.net/qCx69/

$('img').animate({left: '100px'}, 2000, function() {
    $(this).delay(1000).animate({left: '300px'}, 2000);
});

interacting with

<img src='http://boydstire.com/img/car_img.jpg' id='car'
     style='position:absolute;left:0px;top:100px;'>

or without it (this one is not an optimized solution) http://jsfiddle.net/8bZTA/1/

var timer = setInterval(function(){
    update_car(100,1);
}, 50);

function update_car(x,path)
{
  var car = document.getElementById('car'), 
      pos = parseInt(car.style.left) + 1;
  car.style.left = pos + 'px';
  if (pos > x)  
  {
      clearInterval(timer);
      if (path!=2)
      {
      setTimeout(function(){ //pause
       timer = setInterval(function(){update_car(200,2);}, 50);}
           , 5000);
      }
  }
}

Updated:

You can even make a set of stops and motions (it can be update for variable speed too) http://jsfiddle.net/hFH4U/5/

var timer = setInterval(function(){update_car();}, 50);

var path = {'path1': 100, 'pause1': 2000, 'path2': 200, 
               'pause2': 2000, 'path3': 220}, 
                cur_step = 0, steps = [], speed = 1;
for (var i in path)  steps.push(i);

function update_car()
{
  var car = document.getElementById('car'), 
      pos = parseInt(car.style.left);
  if (/^path/.test(steps[cur_step]))
  {
      // motion part
      if (pos > path[steps[cur_step]])
          cur_step++;
  }
  if (/^pause/.test(steps[cur_step]))
  {
      clearTimeout(timer);
      setTimeout(function(){ 
        cur_step++;
        timer = setInterval(function(){ update_car(); }, 50);
      }, path[steps[cur_step]]);
  }
  if (cur_step >= steps.length) // end animation
      clearInterval(timer);

   car.style.left = (pos + speed) + 'px';
}

edited Feb 2, 2012 at 6:56

answered Feb 2, 2012 at 5:57

Cheery

16.2k45 silver badges58 bronze badges

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

4 Comments

Matt Lo Over a year ago

"yes, but i'd rather see how it works in pure javascirpt with no delay()" read comments...

Cheery Over a year ago

@Francesco Ok, I wrote you another example

Francesco Over a year ago

this sound close to what i meant... i'll give it a try

Cheery Over a year ago

@Francesco check another example with different steps in the path.

Matt Lo · Accepted Answer · 2012-02-02 06:23:41Z

Demo: http://jsfiddle.net/MattLo/BVEmF/1/

An object oriented approach:

// example showing linear movement
function car() {
   this.car = document.getElementById("car");
   this.style = this.car.style;
   this.delay = 2000; // 2 secs
   this.position = 0;
}

car.prototype.moveBy = function(m) {
   var me = this;
   setTimeout(function() {
      me.animate(m);
   },this.delay)
}

car.prototype.animate = function(m) {
   var me = this, i=0, 
   r = setInterval(function() {
      ++i;
      me._move(i);
      if(i === m) {
         me.position += i;
         // stop animation
         clearInterval(r);
         // delay again
         me.moveBy(m);
      }
   },77);
}

car.prototype._move = function(i) {
   this.style.marginLeft = i+this.position+"px";
}

Car = new car;
Car.moveBy(20);

AustinDahl · Accepted Answer · 2012-02-02 05:57:54Z

0

Instead of writing a traditional loop, you should take a look at setTimeout and setInterval. The first argument to those calls is a function where you would draw the car or move the car.

answered Feb 2, 2012 at 5:57

AustinDahl

8627 silver badges9 bronze badges

Comments

StephenPAdams · Accepted Answer · 2012-02-02 06:00:02Z

0

You don't need a nested loop. You can use something like setInterval to accomplish this. Keep in mind I'm using jQuery to get the target element by id.

var interval = setInterval(IncreasePosition, 1000); // 1000 is in milliseconds
function IncreasePosition() {
    var targetElement = $("#targetElementId");
    // TODO: Get current padding value
    // TODO: Increment to it
}

That method (IncreasePosition) will get called every second and increase the padding.

answered Feb 2, 2012 at 6:00

StephenPAdams

2,8172 gold badges31 silver badges49 bronze badges

1 Comment

Francesco Over a year ago

yes but with this you have a sudden transition, where I want to keep 10ms between every pixel

chucksmash · Accepted Answer · 2012-02-02 06:40:31Z

0

Edit: Here's the straight up javascript/html/Css...all you need is a suitable car.jpg file...

<!DOCTYPE html>
<html>
<head>
<title>Hi</title>
<style>
#car {
    position: absolute;
    left: 0px;
}
</style>
<script type="text/javascript">
var last_x = 0;
var some_arbitrary_stopping_point = 200;
var x = self.setInterval("move()", 100);

function move() 
{
    last_x += 5;
    document.getElementById('car').style.left = last_x + 'px';
    check_pos_car();
    return last_x;
}

function check_pos_car()
{
    if (last_x > some_arbitrary_stopping_point)
    {
        x = window.clearInterval(x);
    }
}


</script>
</head>
<body>
<img src="car.jpg" id="car" alt="A beetle">
</body>
</html>

edited Feb 2, 2012 at 6:40

answered Feb 2, 2012 at 6:12

chucksmash

6,0671 gold badge36 silver badges41 bronze badges

1 Comment

chucksmash Over a year ago

This code has been tested by the way and accomplishes what you were asking for. You could do just as well without the whole stylesheet and with the if in check_pos_car() in move() of course

Collectives™ on Stack Overflow

Javascript: nested loops?

5 Answers 5

4 Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related