質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

6698閲覧

clearIntervalが効かない

1042limit

総合スコア29

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/08/03 21:31

Vue.jsでカウントダウンアプリを作っている初学者です。
Startを押すとカウントダウンが始まるところまでは実装できたのですが、
Stopを押してclearIntervalをするところで引数を色々試しましたがカウンターが止まりません。
お手数ですがご教授のほどよろしくお願いします。

<!DOCTYPE html> <html> <head> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> <section id="app"> <div> <div> <h2>{{title}}</h2> <div> <span>{{ time }}</span> {{timer}} </div> <button v-if="!timer" @click="startTimer"> 開始 </button> <button v-if="timer" @click="stopTimer"> 停止 </button> </section> </body> <script> const app = new Vue({ el: '#app', // ======================== data: { title : "カウントダウン", time : 30, timer :false, }, // ======================== methods: { startTimer: function() { this.timer = true; setInterval(() => this.countdown(), 1000); }, stopTimer: function() { this.timer = false; clearInterval(this.countdown); }, countdown: function() { if(this.time > 0){ this.time--; } else{ alert("終了"); } } }, // ======================== computed: { } }) </script> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

clearIntervalの引数が間違っています。
setIntervalの戻り値を渡す必要があります。

https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/clearInterval
intervalID: キャンセルする繰り返し動作の識別子。この ID は setInterval() の戻り値です。

javasript

1startTimer: function() { 2 this.stopTimer(); 3 this.timer = setInterval(() => this.countdown(), 1000); 4}, 5stopTimer: function() { 6 if(this.timer){ 7 clearInterval(this.timer); 8 this.timer = 0; 9 } 10},

一例です。

また、コンポーネントが破棄されたときにTimerが止まるように、
beforDestoryもしくはdestroyedでstopTimerを呼んでおいた方が良いでしょう。

投稿2018/08/03 22:58

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

1042limit

2018/08/05 05:07

丁寧にご回答いただきありがとうございます。 無事解決しました。本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問