JavaScript - Python - sleep が無い JavaScript(while loop, setInterval 関数(とclearInterval関数)) - 結城浩さん( @hyuki )と大人の天然素材ゼルプスト殿下プレミアムさん ( @tenapyon )のツイートより

JavaScriptリファレンス

開発環境

• macOS High Sierra - Apple(OS)
• Emacs (Text Editor)
• Python 3,、JavaScript(プログラミング言語)
• Safari(Web ブラウザー)

今朝のコント。
カフェの注文を店員さんがさわやかに復唱するので気持ちがいい。

「アメリカンコーヒーお願いします」
「はい、アメリカンコーヒーですね！」
「支払いはSuicaで」
「はい、Suicaですね！」
「（ピコッ）」
「…すみません、ご注文は何でしたでしょうか？」

朝は忙しいですものね…

— 結城浩 (@hyuki) 2017年10月18日

無限ループの予感…

— 大人の天然素材ゼルプスト殿下プレミアム (@tenapyon) 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();