setIntarvalの同じボタンでの一時停止方法の実装方法について

Question

初歩的な質問かと思いますが、よろしくお願い致しますm(_ _)m

jqueryでストップウォッチアプリを作っておりますが、
同じボタンにスタート機能と一時停止機能を実装したいと考えています。

スタート機能は以下の様にできましたが、
一時停止機能が分かりませんでした。

var count = 0;
$('#startBtn').click(function(){
   setIntarval(count++ , 1000);
}

停止するにはclearIntarvalを使えばいいと思いますが、
・同じボタンで、
・一時的に停止する（＝再開できる）
という機能の実装方法をご教示いただけないでしょうか。

Answer 1

開始しているかフラグをもち処理を分けると良いです

var count = 0;
var id = 0
$('#startBtn').click(function(){
   if(id){
      id = setIntarval(...);
   }else{
      clearIntarval(id);
      id = 0
   }
}

Comments

[ShunichiroGenei]

ありがとうございます！！！
if文に変数名のみを入れることでfalseとtrueを切り替えられるということがよく分かりました！

Answer 2

スタート機能は以下の様にできましたが、

できていません。
setIntarval ではなく setInterval ですし、その第一引数は関数を渡す必要があります。

【WindowOrWorkerGlobalScope.setInterval() - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/setInterval

【JavaScriptでsetIntervalを使う方法【初心者向け】 | TechAcademyマガジン】
https://techacademy.jp/magazine/5537

var count = 0, interval, $span = $( 'span' );
$( '#startBtn' ).click( function() {
	if ( interval ) {
		window.clearInterval( interval );
		interval = null;
	} else {
		interval = window.setInterval( function() {
			count++;
      $span.text( count );
			console.log( count );
		}, 1000 );
	}
} );
```**動くサンプル：**[https://jsfiddle.net/1a7tux69/5/](https://jsfiddle.net/1a7tux69/5/)

---

エラーが出ているかはデベロッパーツールで確認できます。

【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
[http://ryus.co.jp/blog/customize-php-search-1/](http://ryus.co.jp/blog/customize-php-search-1/)

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
[http://www.buildinsider.net/web/chromedevtools/01](http://www.buildinsider.net/web/chromedevtools/01)

【Chrome デベロッパーツールの使い方概要 | Web Tips】
[http://weback.net/utility/1410/](http://weback.net/utility/1410/)

Comments

[s8_chu]

変数名`interval`と`intarval`が混在しているので、正常に動かないように思いますが、いかがでしょうか？

[kei344]

今直しました。指摘ありがとうございます。（再度修正）

[ShunichiroGenei]

ありがとうございます！！！
デベロッパーツールやjsfiddleもあわせてご教示いただき大変助かりました！