Javascript: How can I make Synchronous Loop?

Question

I'm confused by Synchronous/Asynchronous processing of JavaScript.

What I want to do is below. When self_driving() is called, then get_direction_by_sensor() is called and using the direction, moter starts running by move_to_direction(direction). This process repeats 5 times.

function get_direction_by_sensor(){
  // code for getting direction from sensor
  return direction
};

function move_to_direction(direction){
  direction = get_direction_by_sensor()
  // code for driving motor to the direction
};

function self_driving_loop(maxCount, i) {
  if (i <= maxCount) {
    move_to_direction();
    setTimeout(function(){
      self_driving_loop(maxCount, ++i)
    }, 1000);
  }
};

function self_driving() {
  self_driving_loop(5, 1)
};

So I want this code to run like this.

1. get_direction_by_sensor()
1. move_to_direction()
2. get_direction_by_sensor()
2. move_to_direction()
3. get_direction_by_sensor()
3. move_to_direction()
4. get_direction_by_sensor()
4. move_to_direction()
5. get_direction_by_sensor()
5. move_to_direction()

But actually it runs like this.

1. get_direction_by_sensor()
2. get_direction_by_sensor()
3. get_direction_by_sensor()
4. get_direction_by_sensor()
5. get_direction_by_sensor() // this direction is used for moving
5. move_to_direction()

How can I fix this code? Thanks.

======== MORE DETAILED INFO ========

move_to_direction() calles Macro of webiopi written by Python.

function move_to_direction() {
  w().callMacro('get_direction_to_move', [TRIG_F ,ECHO_F ,TRIG_R ,ECHO_R ,TRIG_L ,ECHO_L ,TRIG_B ,ECHO_B], function(macro, args, resp) {
    console.log(resp) // DEBUG
    if(resp == "forward") {
      change_direction('FOWARD');
    } else if(resp == "right") {
      change_direction('RIGHT');
    } else if(resp == "left") {
      change_direction('LEFT');
    } else if(resp == "backward") {
      change_direction('BACKWARD');
    }
  });
}

I guess you'll need to show a little more about those two functions - must have asynchrony in them, right? — Bravo
– Bravo, Commented Nov 21, 2018 at 3:28
the code is doing what you want repl.it/repls/CostlyBonyApplets — Pablo Fernandez
– Pablo Fernandez, Commented Nov 21, 2018 at 3:29
@Bravo Yeah, some asynchrony in move_to_direction function. What I want to do is finish all the (sub) functions in move_to_direction and go to next move_to_direction. — Hiromu Masuda
– Hiromu Masuda, Commented Nov 21, 2018 at 3:36

EJL · Accepted Answer · 2018-11-21 03:35:29Z

2

settimeout must be wrapped with a promise so that it can be awaited. see

function self_driving_loop(maxCount, i) {
  return new Promise(resolve => {
    if (i <= maxCount) {
       move_to_direction();
       setTimeout(function(){
         self_driving_loop(maxCount, ++i)
         resolve()
       }, 1000);
    }
  })
};

call it this way in an async function

await self_driving_loop(maxCount, i)

answered Nov 21, 2018 at 3:35

EJL

2052 silver badges10 bronze badges

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

2 Comments

Hiromu Masuda Over a year ago

did work: self_driving_loop(maxCount, i) , didnt work: await self_driving_loop(maxCount, i)

EJL Over a year ago

it will work for async function please see developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

Javascript: How can I make Synchronous Loop?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related