Youtube IFrame Player APIでのsetIntervalの挙動について

プログラミング初心者です
Youtube IFrame Player APIを用いて動画の経過時間を表示させたいです
以下のコードでとりあえず表示は出来たのですがある問題を見つけました

html
1*必要なところだけ
2<div id="player"></div>　//動画を表示する場所
3<div id="time-area"></div> //経過時間を表示する場所

javascript
1// IFrame Player API の読み込み
2var tag = document.createElement('script');
3tag.src = "https://www.youtube.com/iframe_api";
4var firstScriptTag = document.getElementsByTagName('script')[0];
5firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
6
7
8
9function onYouTubeIframeAPIReady() {
10  player = new YT.Player(
11       'player', // 埋め込む場所の指定
12        {
13          width: 640, // プレーヤーの幅
14          height: 390, // プレーヤーの高さ
15          videoId: 'YouTubeのID',
16          playerVars: {
17            autoplay: 0,
18            showinfo: 0,
19            rel: 0
20          },
21          events: {
22            'onStateChange': onPlayerStateChange
23          }
24        }
25  );
26}
27
28function onPlayerStateChange(event) {
29  var ytStatus = event.target.getPlayerState();
30  if (ytStatus == YT.PlayerState.PLAYING) {
31    var setTime = setInterval(function() {
32      var currentTime = Math.floor(player.getCurrentTime());
33      document.getElementById('time-place').innerHTML = currentTime;
34    }, 100);
35  }
36}

とりあえず経過時間の表示は出来ました
しかしこのコードではclearIntervalを書いていないので
再生ボタンを押すたびにsetIntervalが動いてしまいました
そこでイベントの状態に応じてswitch文を書いて、動画が停止したらclearIntervalをするようにしました
さらに本当にclearIntervalされているか確かめるためsetIntervalの中でコンソールを表示させてみました

javascript
1function onPlayerStateChange(event) {
2  var ytStatus = event.target.getPlayerState();
3  
4  switch (ytStatus) {
5    case YT.PlayerState.PLAYING:
6      var setTime = setInterval(function() {
7        console.log('playing');
8        var currentTime = Math.floor(player.getCurrentTime());
9        document.getElementById('time-place').innerHTML = currentTime;
10      }, 1000);
11      break;
12      
13    case YT.PlayerState.PAUSED:
14      clearInterval(setTime);
15      break;
16  }
17}

しかし動画を停止してもclearIntervalは動作せず、再生と停止を繰り返すと
コンソールには'playing'の文字が溢れかえってしまいました

どのようにすればclearIntervalを正常に動作させられるのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

これでどうでしょう。

JavaScript
1var setTime;	// ADD
2function onPlayerStateChange(event) {
3  var ytStatus = event.target.getPlayerState();
4  if (setTime) clearInterval(setTime);	// ADD
5  switch (ytStatus) {
6    case YT.PlayerState.PLAYING:
7      setTime = setInterval(function() {	// var 削除
8        console.log('playing');
9        var currentTime = Math.floor(player.getCurrentTime());
10        document.getElementById('time-place').innerHTML = currentTime;
11      }, 1000);
12      break;
13
14    case YT.PlayerState.PAUSED:
15      clearInterval(setTime);
16      break;
17  }
18}