スライドショーの再生ボタンがうまくいきません

質問

https://okwave.jp/qa/q9320398.html
の続き

スライドショーの再生ボタンがうまくいきません
一度止めてから再度再生を押しても再生が再開されません。
何度も恐縮ですが理由がわかりますか？
var it;
let iterative = ()=> {
it = setTimeout(myChange , 5000);
}
iterative();
let stoppingNow;
const pauseBtn = document.getElementById('js-pause-btn');
pauseBtn.addEventListener('click', ()=> {
clearTimeout(it);
let stoppingNow = true;
});

const playBtn = document.getElementById('js-play-btn');
if(stoppingNow === true) {
playBtn.addEventListener('click', ()=> {
iterative();

stoppingNow = false;
});

回答No.10

amanojaku1

>このスライドショーの式などを全体的に囲っている即時関数の中に
>(()=> {
>let stoppingNow = false;
>のように行っても問題なく作動します。
>グローバル変数でないと宣言した変数は、ベントリスナーないであろうがページ読み込み字であろうが処理が終わると消えると思ったのですがなぜうまくいくのでしょうか？

原因はJavaScriptのバグかな？としか思いつきません。
これを新規記事で投稿して他の方々に聞いてみては如何でしょうか。

お礼

やっぱり、グローバル以外でページ読み込み後、変数が消えずに残り続けるのは、仕様上おかしいのですね。

＞＞＞＞
>playBtn.addEventListener('click', ()=> {
>iterative();
>stoppingNow = false;
>alert("playBtn：stoppingNow = "+stoppingNow);
>});

上記はクリックしたときにだけ実行されるのでページの読み込み時は何のかかわりもないと思っていたのですが、確かに登録する作業なので、
読み込み時にifがfalseなことによって実行されないと登録されないので、
その後クリックしても登録されていないものは決して実行されないので、
いくらクリックしても何も実行されないという事なのですね。

上記の認識は正しいのですね。

回答No.9

amanojaku1

>ただ
>クリック時には、このifは意味をなさないのでなぜ実行できなかったのでしょうか？

>const playBtn = document.getElementById('js-play-btn');
>if(stoppingNow === true) {
>playBtn.addEventListener('click', ()=> {
>iterative();
>stoppingNow = false;
>alert("playBtn：stoppingNow = "+stoppingNow);
>});

最初から考えて下さい、「stoppingNow = false」で「playBtn.addEventListener(～」がスルーされ、下記の内容がイベントリスナーに登録されません。
イベントリスナーに登録されてないのだから、イベントが発生しても、それらは実行されません。

>'click', ()=> {
>iterative();
>stoppingNow = false;
>alert("playBtn：stoppingNow = "+stoppingNow);
>}

>このスライドショーの式などを全体的に囲っている即時関数の中に
>(()=> {
>let stoppingNow = false;
>のように行っても問題なく作動します。
>グローバル変数でないと宣言した変数は、ベントリスナーないであろうがページ読み込み字であろうが処理が終わると消えると思ったのですがなぜうまくいくのでしょうか？

プログラムをチャント保存していましたか？、プログラムがチャント保存されているのを確認後、ブラウザーでページの再読み込みを何度か試行してみて下さい。

お礼

>playBtn.addEventListener('click', ()=> {
>iterative();
>stoppingNow = false;
>alert("playBtn：stoppingNow = "+stoppingNow);
>});

上記はクリックしたときにだけ実行されるのでページの読み込み時は何のかかわりもないと思っていたのですが、確かに登録する作業なので、
読み込み時にifがfalseなことによって実行されないと登録されないので、
その後クリックしても登録されていないものは決して実行されないので、
いくらクリックしても何も実行されないという事なのですね。

補足

また
(()=> {
let stoppingNow = false;

こちらの件ですがやはり再度確認しても上記のようにカプセル化のための即時関数内でもやはりうまくいっています。
試しに削除したところplayできなくなったので間違いないと思います。

回答No.8

amanojaku1

>回答No.7　amanojaku1

>↑良く見てみるとif文の位置が変です、下記のように変更してみて下さい。
>
>const playBtn = document.getElementById('js-play-btn');
>playBtn.addEventListener('click', ()=> {
>if(stoppingNow === true) {
>iterative();
>stoppingNow = false;
>alert("playBtn：stoppingNow = "+stoppingNow);
>}
>});
←★この辺

リスナー内に"}"(終わりブレイス(終わり波括弧))を１つ増やしているので、「←★この辺」の近くの"}"(終わりブレイス(終わり波括弧))を１つ減らす必要があると思われます。

お礼

おかげさまでうまくいっているので結果に問題はありません。

下記の部分だけが疑問として残りました

恐らくイベントリスナーの外のifがあったので、
読み込文字にだけifを実行されたが、真ではないので、falseになり、そのままスルーされてていて意味をなさなかったというのはわかりました。

ただ
クリック時には、このifは意味をなさないのでなぜ実行できなかったのでしょうか？

またカプセル化したいので
このスライドショーの式などを全体的に囲っている即時関数の中に
(()=> {
let stoppingNow = false;

のように行っても問題なく作動します。

グローバル変数でないと宣言した変数は、ベントリスナーないであろうがページ読み込み字であろうが処理が終わると消えると思ったのですがなぜうまくいくのでしょうか？

回答No.7

amanojaku1

>const playBtn = document.getElementById('js-play-btn');
>if(stoppingNow === true) {
>playBtn.addEventListener('click', ()=> {
>iterative();
>stoppingNow = false;
>alert("playBtn：stoppingNow = "+stoppingNow);
>});

↑良く見てみるとif文の位置が変です、下記のように変更してみて下さい。

const playBtn = document.getElementById('js-play-btn');
playBtn.addEventListener('click', ()=> {
if(stoppingNow === true) {
iterative();
stoppingNow = false;
alert("playBtn：stoppingNow = "+stoppingNow);
}
});

お礼

ありがとうございました。
それが原因でした。

恐らくイベントリスナーの外のifがあったので、
読み込文字にだけifを実行されたが、真ではないので、falseになり、そのままスルーされてていて意味をなさなかったというのはわかりました。

ただ
クリック時には、このifは意味をなさないのでなぜ実行できなかったのでしょうか？

回答No.6

amanojaku1

デバッグに「alert(～);」を使って見て下さい。
下記のようにして、ボタンのクリック時に「alert(～);」が表示されるか、チェックしてみて下さい(もし予想が正しければ「setTimeout(～)」、「clearTimeout(～)」に問題があるかもしれません)。

グローバルに
let stoppingNow = false;

カプセル化の即時関数の中に
const pauseBtn = document.getElementById('js-pause-btn');
pauseBtn.addEventListener('click', ()=> {
clearTimeout(it);
stoppingNow = true;
alert("pauseBtn：stoppingNow = "+stoppingNow);
});

const playBtn = document.getElementById('js-play-btn');
if(stoppingNow === true) {
playBtn.addEventListener('click', ()=> {
iterative();
stoppingNow = false;
alert("playBtn：stoppingNow = "+stoppingNow);
});

お礼

行ってみました。
pauseボタンはtrue
startボタンは無反応でした。

やはりtrueの入った変数がイベントリスナーが終了するとともに、
無くなってしまっているのではないでしょうか？

ただなぜグローバルに変数の宣言をしたのになくなっているのかが謎です。

回答No.5

amanojaku1

>const pauseBtn = document.getElementById('js-pause-btn');
>pauseBtn.addEventListener('click', ()=> {
>clearTimeout(it);
>let stoppingNow = true;
>});

↑ここで「stoppingNow」をローカル宣言しているのが原因かと思われます。

>スライドショーの再生ボタンがうまくいきません
>一度止めてから再度再生を押しても再生が再開されません。
>何度も恐縮ですが理由がわかりますか？

そうすると、なぜ一度目は再生できるのかが疑問ですが…、もしかして(再生ボタンを押さなくても)ページ表示時に自動的に再生してますか？、その場合は「let stoppingNow = true;」の設定値は「true」ではなく「false」に設定して下さい。
とりあえず、下記のように変更してみて下さい。

var it;
let iterative = ()=> {
it = setTimeout(myChange , 5000);
}
iterative();
let stoppingNow = true; // ←もし(再生ボタンを押さなくても)ページ表示時に自動的に再生している場合は ここは「false」に設定して下さい。

const pauseBtn = document.getElementById('js-pause-btn');
pauseBtn.addEventListener('click', ()=> {
clearTimeout(it);
stoppingNow = true;
});

const playBtn = document.getElementById('js-play-btn');
if(stoppingNow === true) {
playBtn.addEventListener('click', ()=> {
iterative();
stoppingNow = false;
});

お礼

＞＞＞
そうすると、なぜ一度目は再生できるのかが疑問ですが…、もしかして(再生ボタンを押さなくても)ページ表示時に自動的に再生してますか？、その場合は「let stoppingNow = true;」の設定値は「true」ではなく「false」に設定して下さい。

仰る通りです。
確かに始めは止まっていないのでfalseでないとおかしいですね。
停止を押したときにfalseにすべきですね。

グローバルに
let stoppingNow = false;

カプセル化の即時関数の中に
const pauseBtn = document.getElementById('js-pause-btn');
pauseBtn.addEventListener('click', ()=> {
clearTimeout(it);
stoppingNow = true;
});

const playBtn = document.getElementById('js-play-btn');
if(stoppingNow === true) {
playBtn.addEventListener('click', ()=> {
iterative();
stoppingNow = false;
});

という形にしたのですがやはり、playボタンを押しても実行されていないようです。
恐らくpauseボタンを押してtrueにはなっているのですが、pauseボタンが終了したと同時に、
stoppingNow = true;がなくなってしまっているのではと思います。

回答No.4

doraneko66

const pauseBtn = document.getElementById('js-pause-btn');
const playBtn = document.getElementById('js-play-btn');

hogehoge();

pauseBtn.addEventListener('click', ()=> {
clearTimeout(it);
hogehoge(stoppingNow);
});

function hogehoge(stoppingNow){
if(stoppingNow === true){
playBtn.addEventListener('click', ()=> {
iterative();
});
stoppingNow = false;
}else{
playBtn. removeEventListener('click', ()=> {
//ボタンの色変えるとか
});
stoppingNow = true;
}
}

とか

回答No.3

doraneko66

再生ボタンをファンクションにして
停止ボタンの中に再生ファンクション置いて
引数入れて判定する。とか

さらに再生ボタンを押したら、クリックをoffさせるのはいかがでしょうか。

回答No.2

doraneko66

stoppingNowは、どこかのメソッドに入れる値ですか？

回答No.1

doraneko66

これ多分、エラー出てないですか？

if文の場所おかしくないですか？
そもそもclearTimeoutしているのにif文いる？

お礼

ランタイムエラーは出ていません

ifは停止ボタンを押した時のみ再生ボタンを押せるようにしているからです。