JavaScript学ぶためにアラームを作りますその①
JavaScriptが業務に必要になりそうなので、独習JavaScriptを2週間ほど行い60%くらい読破しました。
大体教科書をやり始めて50時間目くらいです。
JavaScriptは不思議な言語で、
thisのスコープが行方不明になったり、メソッドに切り出したらどうやって使いたい変数を渡すんだっけとか、どうやってもきれいに書けないとかあります。
あ、でも配列はいきなり可変長配列で使えてすごく便利ですね。
そもそも今のJavaScriptってどう書くのがトレンドなんでしょうね?
クラス記法で書いたら、HTMLと連携しやすいJava感覚で書ける気もしますし、関数毎に切り出して繋げていくのがJavaScriptだという人もいますし・・・。
さて、本題としてはclearIntervalがうまく使えないので、このようなクソコードになってしまった。という話です。
setIntervalの戻り値がintervalID(実行している関数に固有のIDでもついてるのかな?)とあるのですが、どうやってclearIntervalに渡してあげればいいのかわかりません。
そもそもサンプルコードではclearIntervalID();って感じで実行していたりして、あれ?intervalIDって必須の引数じゃないの?とかわからなくなりました。
あとはsetTimer();を走らせたら終わるまで待って、最後にif文でもう一回アラームを使うか決めたいですね。
この辺はasyncとかawaitとか使えばいいそうですが、独習JavaScriptの残りの40%にその辺が書かれているのでとりあえず未実装です。
以下がコードです。
悪さはしないと思いますが、実行は自己責任でお願いします。
<script>
function setTimer() {
const countMinute = window.prompt("何分のタイマーにしますか?");
//HTMLにするのがめんどくさいので非推奨メソッド使用
document.write(`${countMinute}分のタイマーを設定しました`);
const changeMsRule = 60 * 1000;
const minute = countMinute * changeMsRule;
const futureTime = Date.now() + minute;
setInterval(() => {
const nowTime = Date.now();
if (futureTime - nowTime < 0) {
window.alert(`${countMinute}分経ちましたので終了します`);
clearInterval;
}
}, 1000);
}
setTimer();
//setTimer()が終わる前に以下が走るのはバグです。
if (window.confirm("再度アラームを使いますか?") === true) {
location.reload();
} else {
window.close();
}
</script>
この記事が気に入ったらサポートをしてみませんか?