ループを使う（繰り返し実行する）

同じ処理を繰り返す方法。

overview

サーボモーターを左右に動かしたりなど、繰り返しながら順番に何かをしたいときはあります。

通常は無限ループを作成してその中で処理を行いますが、obnizで同じ処理を繰り返す方法は以下の方法があります。

setTimeout, setIntervalを使う
obniz.onloopを使う
while(true)とobniz.wait()を使う

1. setTimeout, setIntervalを使う

JavaScriptの言語にはそもそも同じ処理を繰り返すのに便利な関数があります。

setTimeout・・・指定した時間後に関数を実行
setInterval・・・指定した時間ごとに関数を実行

この２つです。
一定間隔である処理をするのであればsetIntervalが便利です。

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

このように書くと、// every secondとかかれた場所が1秒ごと(1000ミリ秒ごと)に呼ばれます。
これを使って一定間隔でサーボモーターに手をふるような動きをさせてみましょう。

<!-- 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>

このようになります。
１秒ごとに

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

の部分が呼ばれます。
servoにangleで角度を指定します。
その後にangleが0なら90に、angleが0じゃなかったら0にします。
そうすると、次に（１秒後に）またこの関数が呼ばれたときにはサーボモーターは違う角度になります。

2. obniz.onloopを使う

setInterval 関数では、obnizとの接続が切れてもintervalが止まりません。
そこで、obnizには接続が切れたら自動的に停止するようにしてあるsetIntervalのような関数 onloop が用意してあります。

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

obniz.onloop に渡した関数は繰り返し実行され、接続が切れたら自動的に処理が停止します。
先ほどの関数を obniz.onloop を使うと以下のように書くことができます。

<!-- 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@4.0.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. while(true)とobniz.wait

obnizには一定期間処理を停止する関数が用意されています。

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

このように書くことでledを1秒だけonにすることができます。
while(true)の無限ループと組み合わせることで以下のように書くことができます。

<!-- 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>

とてもスッキリと書くことができました。
しかしこれもsetIntervalなどと同じく、obnizとの接続が切れた時には自分からこの無限ループを抜けることが必要になってきます。

overview

1. setTimeout, setIntervalを使う

2. obniz.onloopを使う

3. while(true)とobniz.wait

タイトル