1. ホーム
  2. javascript

[解決済み] clearInterval()で目覚まし時計に「スヌーズ」ボタンを追加する。私は何を間違えているのでしょうか?

2022-02-16 13:15:47

質問

JavaScriptの練習のために、目覚まし時計の「アプリ」プロジェクトに取り組んでいます。私はかなり新しいので、多分私はちょうどclearInterval()を正しく理解していない、そして私は誰かが助けてくれることを望んでいました。

JavaScriptです。

let sound = new Audio('./music/alarmsound.mp3');
let playAudio = () => sound.play();
const snooze = document.getElementById('snooze');
let pause = () => sound.pause();

let alarm = document.getElementById('alarm');
alarm.onclick = function setAlarm() {
    let userHour = prompt("Please enter the hour of which you would like the alarm to be set ????", "07");
    if (userHour.charAt(0) > 0 && userHour < 10) {
        userHour = "0" + userHour;
    }
    let userMinutes = prompt("Please enter the minutes of which you would like the alarm to be set ????", "30");
    let timeformat = [userHour, userMinutes];
    function realTime() {
        let realtime = new Date();
        if(timeformat[0] == realtime.getHours() && timeformat[1] == realtime.getMinutes()) {
            playAudio();
        } 
        if(timeformat[0] != realtime.getHours && timeformat[1] != realtime.getMinutes()) {
            pause();
        }
    }
    let checkTime = () => {
        setInterval(realTime, 1000)
    }


checkTime();
let stopAlarm = () => {
    clearInterval(checkTime);
}
snooze.addEventListener("click", stopAlarm());
}

ユーザーがアラームボタンをクリックすると、アラームを鳴らす時間と分を設定するよう求めるプロンプトが表示されます。この部分はうまくいっています。さらに、1分経過して現在時刻がユーザーが設定したアラーム時刻と一致しなくなると、音声が停止します。しかし、スヌーズボタンの機能を追加しようとしているのですが、何をやってもうまくいかないようです。

何かヒントやコツがあれば、ぜひ教えてください。コードが乱雑であれば申し訳ありません。

どのように解決するのですか?

いくつかの点で、期待通りに動作しないことがあります。変更案を確認し、コメントを追加しました。

const snooze = document.getElementById('snooze');
const alarm = document.getElementById('alarm');
const sound = new Audio('./music/alarmsound.mp3');
const playAudio = () => sound.play();
const pause = () => sound.pause();
let intval; // 1. keep a reference to the interval outside of setAlarm()

alarm.onclick = function setAlarm() {
    let userHour = prompt("Please enter the...", "07");
    if (userHour.charAt(0) > 0 && userHour < 10) {
        userHour = "0" + userHour;
    }
    let userMinutes = prompt("Please enter the...", "30");
    let timeformat = [userHour, userMinutes];
    function realTime() {
        let realtime = new Date();
        if(timeformat[0] == realtime.getHours() && timeformat[1] == realtime.getMinutes()) {
            playAudio();
        } 
        if(timeformat[0] != realtime.getHours && timeformat[1] != realtime.getMinutes()) {
            pause();
        }
    }

    intval = setInterval(realTime, 1000) // 2. assign interval to the variable
}

// 3. Dont set your event listener inside the setAlarm() function (unless it's required)
function stopAlarm() {
   clearInterval(intval); // 4. Clear interval with correct reference
}
snooze.addEventListener("click", stopAlarm);