How to loop - obniz Docs

How to loop in JavaScript

Overview

We sometimes want to make something move sequentially, like moving a motor towards left and right infinitely.
This can be done by creating a loop.
Let's see how to do this.

With obniz, the ways to program loop are as follows.

setTimeout and setInterval
obniz.onloop
while(true) and obniz.wait()

1. Use setTimeout and setInterval

JavaScript has a loop function embedded already.

setTimeout・・・call function after a set time
setInterval・・・call function periodically

setInterval is useful when you want to call a function periodically.

setInterval(function(){
  // every second
}, 1000)

// every second will be called every 1 sec(=1000msec).
By using this, let's make the servo motor move sequentially and make it look like it's waving.

<!-- HTML Example -->
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.com/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@3.3.0/obniz.js"></script>
</head>
<body>

<div id="obniz-debug"></div>
<h1>obniz instant HTML</h1>

<script>
  var obniz = new Obniz("OBNIZ_ID_HERE");
  obniz.onconnect = async function () {
    var servo = obniz.wired("ServoMotor", {gnd:0, vcc:1, signal:2});
    var angle = 0;
    setInterval(async function(){
      servo.angle(angle);
      if (angle == 0) {
        angle=90;
      } else {
        angle=0;
      }
    }, 1000);
  }
</script>
</body>
</html>

Every second, this code will be called

servo.angle(angle);
if (angle == 0) {
  angle=90;
} else {
  angle=0;
}

It sets the servo motor's angle with the "angle" variable.
After that, set it so that if angle = 0, the angle changes to 90. and if angle = 90 then it changes to 0.
This way, the servo motor will move from 0 degree to 90 degrees, and back to 0 degree and again to 90 degrees, and so on.

2. Use obniz.onloop

setInterval works fine but there is a problem that it does not stop even when it gets disconnected from obniz.
To resolve this issue, we provide the repeat function which automatically stops calling when obniz gets disconnected.

obniz.onloop = async function(){
  // called repeatedly
}

It looks similar to setInterval. The only difference is that this function is never called once obniz gets disconnected.
Below is an example of writing the program using this function.

<!-- HTML Example -->
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.com/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@3.31.0/obniz.js"></script>
</head>
<body>

<div id="obniz-debug"></div>
<h1>obniz instant HTML</h1>

<script>
  var obniz = new Obniz("OBNIZ_ID_HERE");
  obniz.onconnect = async function () {
    var servo = obniz.wired("ServoMotor", {gnd:0, vcc:1, signal:2});
    var angle = 0;
    obniz.onloop = async function(){
      servo.angle(angle);
      if (angle == 0) {
        angle=90;
      } else {
        angle=0;
      }
      await obniz.wait(1000);
    }
  }
</script>
</body>
</html>

3. Use while(true) and obniz.wait

obniz has a function that pauses a program.

led.on();
await obniz.wait(1000);
led.off();

By writing this way, you can lit a LED only for 1sec.
You can use the while(true) infinite loop and obniz's wait function.

<!-- HTML Example -->
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.com/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@latest/obniz.js"></script>
</head>
<body>

<div id="obniz-debug"></div>
<h1>obniz instant HTML</h1>

<script>
  var obniz = new Obniz("OBNIZ_ID_HERE");
  obniz.debugprint=true;
  obniz.onconnect = async function () {
    var servo = obniz.wired("ServoMotor", {gnd:0, vcc:1, signal:2});
    while(true){
      servo.angle(0);
      await obniz.wait(1000);
      servo.angle(90);
      await obniz.wait(1000);
    }
  }
</script>
</body>
</html>

It looks very neat and clean. You can see that it works fine.
However, this function also has the same problem as setInterval, as the loop continues even when it is disconnected from obniz.
It thus becomes necessary to break this infinite loop.

Overview

1. Use setTimeout and setInterval

2. Use obniz.onloop

3. Use while(true) and obniz.wait

タイトル