2017年10月18日水曜日

開発環境

ということで、「無限ループの予感」を JavaScript で考えてみることに。

同じ会話の繰り返しをそのまま出力すると速すぎるので、一定の間隔でお互いの会話を表示することに。

JavaScript に慣れてなくて他の言語を使ってると、無限ループの会話の各メッセージを表示するときwhile loop、あるいは再帰関数で書くことを考え、早すぎる場合はsleep(一定時間プログラムを止める)を利用しようとする(?)けど、JavaScript には sleep 関数が無い。ということで、setInterval 関数を活用。

まずは、while loop と sleep を使った場合のコードを Python で書いてみて、その次に同様のことをするプログラムを JavaScript で書いてみる。

コード(Emacs)

Python 3

#!/usr/bin/env python3
import time
import datetime

i = 0
messages = [
    'アメリカンコーヒーお願いします。',
    'はい、アメリカンコーヒアメリカンコーヒーですね!',
    '支払いはSuicaで',
    'はい、Suicaですね',
    '(ピコッ)',
    '…すみません、ご注文は何でしたでしょうか?'
]

while True:
    print(f'{messages[i]}({datetime.datetime.now().second})')
    i += 1
    if i == len(messages):
        i = 0
    time.sleep(1.5)

入出力結果(Terminal, Jupyter(IPython))

$ ./sample.py
アメリカンコーヒーお願いします。(11)
はい、アメリカンコーヒアメリカンコーヒーですね!(13)
支払いはSuicaで(14)
はい、Suicaですね(16)
(ピコッ)(17)
…すみません、ご注文は何でしたでしょうか?(19)
アメリカンコーヒーお願いします。(20)
はい、アメリカンコーヒアメリカンコーヒーですね!(22)
支払いはSuicaで(23)
はい、Suicaですね(25)
(ピコッ)(26)
…すみません、ご注文は何でしたでしょうか?(28)
アメリカンコーヒーお願いします。(29)
^CTraceback (most recent call last):
  File "./sample.py", line 20, in <module>
    time.sleep(1.5)
KeyboardInterrupt
$

HTML5

<pre id="output0"></pre>
<button id="clear0">最初から</button>
<script src="sample.js"></script>

JavaScript

let i = 0,
    tm,
    messages = [
        'アメリカンコーヒーお願いします。',
        'はい、アメリカンコーヒアメリカンコーヒーですね!',
        '支払いはSuicaで',
        'はい、Suicaですね',
        '(ピコッ)',
        '…すみません、ご注文は何でしたでしょうか?'
    ],
    len = messages.length,
    pre0 = document.querySelector('#output0'),
    btn_order0 = document.querySelector('#order0'),
    btn_clear0 = document.querySelector('#clear0'),
    inputs = [btn_clear0, btn_clear0],
    p = (x) => pre0.textContent += x + '\n';
    order = () => tm = setInterval(
        () => {
            p(messages[i]);
            i += 1;
            i = i === len ? 0 : i;
        }, 1500),
    clear = () => {
        pre0.textContent = '';
        i = 0;
        clearInterval(tm);
        order();
    };

btn_clear0.onclick = clear;
order();














						

0 コメント:

コメントを投稿