終了時間になったら関数を呼び出したい

Question

あけましておめでとうございます。

data: function() {
return {
today_schedule: [
　{ id:'1', name: 'チームミーティング', start: '9:00', end: '10:00',},
　{ id:'2', name: '定例会議', start: '10:30', end: '11:30', },
}

このtoday_schedule配列のend時間の10分前になったら音声で通知をしたいと思っています。関数はこのようにしました。

            minutesAgo: function(){
                var hournow = now.getHours();
                var minutesnow = now.getMinutes();
                //時間を取り出して数値にする
                var hourend = this.today_schedule[i].end.substr(0,2);
                var hourend = Number( hourend );
                //分を取り出して数値にする
                var minutesend = this.today_schedule[i].end.substr(3,2); 
                var minutesend = Number( minutesend );
                //10分前にする
                var tenminago = minutesend-10;
                if(hournow == hourend && minutesnow == tenminago){
                    var speak = new SpeechSynthesisUtterance();
                    speak.text = '10分前になりました。';
                    speak.lang = 'ja-jp';
                    speechSynthesis.speak(speak);
                }
            },

この関数をどこで呼び出せばいいのかわかりません。
そもそもこの関数の書き方はあってますでしょうか？

よろしくお願いします。

---追記---
setTimeoutを使用してボタンを追加し文を変更いたしました。
よろしければこちらの方もよろしくお願いします。

            clickButton: function(event) {;
                this.i = this.i+1
                //ボタンを押された時間から終了予定時刻までの差を計算
                var now = new Date();
                var hournow = now.getHours();
                var minutesnow = now.getMinutes();
                //時間を取り出して数値にする
                var hourend = this.today_schedule[i].end.substr(0,2);
                hourend = Number( hourend );
                //分を取り出して数値にする
                var minutesend = this.today_schedule[i].end.substr(3,2); 
                minutesend = Number( minutesend );
                //計算する
                var hour = ( hourend - hournow );
                hour = ( hour * 60 * 60 );//秒
                var minutes = ( minutesend - minutesnow );
                if( minutes < 0 ){ 
                    minutes = ( 60 + (minutes) ) ;
                    minutes = ( minutes * 60 );
                    var second = ( hour + (minutes) );
                    var msecond = ( second * 1000 );
                    var mago = ( msecond - 600000 );
                }else{
                    minutes = ( minutes * 60 );//秒
                    second = ( hour + ( minutes ));
                    msecond = ( second * 1000 );//終了まで（ミリ秒）
                    mago = ( msecond - 600000 );//10分前
                }
                //10分前通知
                var speak = new SpeechSynthesisUtterance();
                speak.text = '終了10分前です。';
                speak.lang = 'ja-jp';
                speak = speechSynthesis.speak(speak);
                setTimeout(speak, mago);
                /*var time = setTimeout(speechSynthesis.speak(speak), mago);
                clearTimeout(time);*/
                //終了通知
                var endspeak = new SpeechSynthesisUtterance();
                endspeak.text = '終了時刻となりました。';
                endspeak.lang = 'ja-jp';
                speak = speechSynthesis.speak(speak);
                setTimeout(speak, msecond);
                /*time = setTimeout(speechSynthesis.speak(endspeak), msecond);
                clearTimeout(time);*/
            },

Answer 1

こんにちは、meronpansukiさん

質問拝見しました。
Vue.jsを利用した経験がため、JSの観点からご回答できる部分をお答えしようと思います。

まず最初のdataにわたす関数ですが、 data は関数でなければなりませんより、以下のようになると思います。

data: function() {
  return {
    today_schedule: [
　    { id:'1', name: 'チームミーティング', start: '9:00', end: '10:00' },
　    { id:'2', name: '定例会議', start: '10:30', end: '11:30' }
    ]
  }
}

続いて、minutesAgo関数ですが、質問にコメントとして、追加しますと

            minutesAgo: function(){
// この関数内で now が定義されていないですが、関数外で定義されていますか？
// var now = new Date(); などで定義されていれば、下の2行はOKそうです。
                var hournow = now.getHours();
                var minutesnow = now.getMinutes();
                //時間を取り出して数値にする
// i が定義されていないため、配列から取り出すことができないです
// 今回の配列だと 0 か 1 で値が取れます
// substr(0, 2)で時間の文字列だけ取る処理をしていますが、「時間」が1桁」だと正常に動作しません
                var hourend = this.today_schedule[i].end.substr(0,2);
                var hourend = Number( hourend );
                //分を取り出して数値にする
// こちらも時間によっては、取得できる範囲がことなるので、想定とは異なる値になりそうです
                var minutesend = this.today_schedule[i].end.substr(3,2); 
// 分が正常に取れたとして、もし10:05のような時間だった場合分が -5分 のようになり、時間ではない結果になりそうです。
                var minutesend = Number( minutesend );
                //10分前にする
                var tenminago = minutesend-10;
                if(hournow == hourend && minutesnow == tenminago){
                    var speak = new SpeechSynthesisUtterance();
                    speak.text = '10分前になりました。';
                    speak.lang = 'ja-jp';
                    speechSynthesis.speak(speak);
                }
            },

ちなみに、String.prototype.substr()は非推奨なので、利用されないほうがよいです。

結論からいうと、時間を管理するのはなかなか骨の折れる作業なので、ライブラリの利用をおすすめします。

Moment.js
date-fns

以上、指摘ばかりになり恐縮です、
参考になれば幸いです。

Comments

[meronpansuki]

お返事ありがとうございます。
やはり時間が絡むとやりずらいのですね・・・
教えていただいたライブラリを使用できるように頑張ります！
ありがとうございます！

[AkitoshiManabe]

> String.prototype.substr()は非推奨
gentamuraさん、ありがとうございます。
完全に見落としていました（今まで、普通に使っていました）。

Answer 2

インターバル処理をする関数をmethod上に用意し
createdで呼び出してください
（中途半端にアップされたので更新）

Comments

[yambejp]

一応こんな感じ
（条件のところを適当に書き換えればよいです）
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data:{
timerId:null,
hoge:0,
message:'',
},
created:function() {
this.count();
},
methods: {
count:function(){
this.timerId=setInterval(function(obj){
obj.minutesAgo();
if(obj.hoge>=5){
obj.message="time out"
clearInterval(obj.timerId);
}
},1000,this);
},
minutesAgo: function(){
this.hoge++;
console.log(this.hoge);
},
},
});
</script>

[meronpansuki]

詳しく書いていただきありがとうございます！
すみません、書いていただいたsetIntervalを調べていて、
setTimeoutを見つけまして、ボタンを一つ追加し、それを押したときに
処理をする文を考えました。質問に追記いたしますので、よければみていただけますでしょうか。。

[yambejp]

setTimeoutはnミリ秒後に１回だけ実行する関数ですから
この場合はsetIntervalで定期的にチェックして
所定の時刻と合致したら終了の方が処理しやすいです。
（setTimeoutもsetIntervalもnミリ秒は必ずしも正確ではないので）

[meronpansuki]

ありがとうございます！おかげさまで解決できました。
本当にたすかりました。