グローバル変数以外も変数は残り続ける？

質問

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

var stoppingNow = false;
がグローバル変数になっていないので仕様上はページ読み込み時に実行されて処理が終わった瞬間に
この変数は削除されて使えなくなると聞いたのですが、
なぜかpauseBtnを押した後に、playBtnを押すと問題なく使えてしまいます。

グローバルにない変数は、stoppingNow = true;を実行してもそんな変数もうないとなるはずなのですよね？
それともグローバルにない変数も残っていて、代入の処理よりも上、ないしは親のスコープにあれば使えるのが仕様なのですか？

(function () {
var stoppingNow = false;

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

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

myChange();

})();

回答No.8

wormhole

>アンロードとは具体的に閉じる以外にどんなことを含むのですか？

他のページへの移動やリロードでもアンロードされます。
javascript アンロードで調べればすぐに分かることだと思いますけど。

回答No.7

wormhole

>ページをバツボタンで閉じるまでは残り続けているですか?

そのページをクローズボタンで閉じるときも含めアンロードされるまで残ります。

お礼

アンロードとは具体的に閉じる以外にどんなことを含むのですか？

つまりページを読み込み終わった時点でvar stoppingNow = false;はページを閉じない限り残り続けているという事ですか？

補足

グローバルでないと残らないと聞いたのですが、
どこにあってもイベントリスナー内でなければ、閉じたりしなければ残るということ?

回答No.6

wormhole

>let stoppingNow = false;
>は即時関数の中身が一通り読み終わったらこの変数がなくなるのではなくというのであればいつなくなるのでしょうか？

let stoppingNow = false;
は、どこから？

var stoppingNow = false;
の事だとして。
申し訳ありません。なくなるのは関数が終了したタイミングではなく、
その無名関数を定義しているページがアンロードされるタイミングでした。

補足

ページをバツボタンで閉じるまでは残り続けているですか?

回答No.5

wormhole

>playBtnのイベントリスナーも実行できるかと思ったのですが、
>pauseはうまく動くが playBtnの方が動かなくなりました。

動かなくなったというのは、どう動かなくなったんでしょうか。
pauseBtnのclickイベントを実行する前にPlayBtnのclickイベントを実行したのではありませんか？

お礼

var stoppingNow = false;がある場合は問題なく再生されますが、
こちらをなくすとpauseBtnのclickイベントを実行してからでもうまくいきません。

回答No.4

wormhole

>という事ですが、この即時関数はページ読み込み時実行されるので上記の変数はページ読み込み時に実行され、
>ページ読み込みが終わった時点に、即時関数は終了しています。

読み込み時に実行されますが、ページ読み込み終わった時点で関数が終了するとは限りません。
読み込んでいる最中に終わることもあります(というか、そのページの最後でもない限り読み込みの途中で終わります)。
だから「読み込み終わった時点で」ではなく「関数が終了した時点で」といってるんです。

お礼

let stoppingNow = false;
は即時関数の中身が一通り読み終わったらこの変数がなくなるのではなくというのであればいつなくなるのでしょうか？

回答No.3

wormhole

>(function () {
>var stoppingNow = false;
>
>こちらで宣言しているのでこの変数自体はページ読み込み時には実行されていますが、やはりグローバルにないので、ページ読み込みが完全に完了した時点で消去されているのですね。

違います。
消去されるのは
>(function () {
>var stoppingNow = false;
の無名関数の実行が終了した時点です。

>イベントリスナー実行時には、変数はないものの、イベントリスナー内ではvarを省略しているので、stoppingNow変数はすでに削除されているが、ここでグローバルに変数を宣言したことになり、変数がないとならないという事でしょうか？

はい、そうです。
参照だけの場合は宣言したことにならないかもしれないですが。

お礼

違います。
下記を見てください。カプセル化の即時関数はイベントリスナーになっていないのでページ読み込み時にしか実行されていません。

その中のイベントリスナーの二つのみがクリック時に実行されているのです。

＞＞
消去されるのは
>(function () {
>var stoppingNow = false;
の無名関数の実行が終了した時点です。

という事ですが、この即時関数はページ読み込み時実行されるので上記の変数はページ読み込み時に実行され、
ページ読み込みが終わった時点に、即時関数は終了しています。

(function () {
var stoppingNow = false;

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

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

補足

＞＞＞
はい、そうです。
参照だけの場合は宣言したことにならないかもしれないですが。

もし宣言したことにならないのにうまくいくのであれば矛盾しませんか？

回答No.2

wormhole

>グローバルにない変数は、stoppingNow = true;を実行してもそんな変数もうないとなるはずなのですよね？

varは省略できますので、変数stoppingNowが存在しない状態で、
stoppingNow = true;
を実行するとグローバル変数stoppingNowの宣言もした事になります(var省略時は無条件にグローバル変数になります)。

お礼

(function () {
var stoppingNow = false;

こちらで宣言しているのでこの変数自体はページ読み込み時には実行されていますが、やはりグローバルにないので、ページ読み込みが完全に完了した時点で消去されているのですね。

イベントリスナー実行時には、変数はないものの、イベントリスナー内ではvarを省略しているので、stoppingNow変数はすでに削除されているが、ここでグローバルに変数を宣言したことになり、変数がないとならないという事でしょうか？

補足

function () {
// let stoppingNow = false;

としても

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

をクリックして実行した際にvar stoppingNow = true;
がグローバルにできるので、
playBtnのイベントリスナーも実行できるかと思ったのですが、
pauseはうまく動くが playBtnの方が動かなくなりました。

グローバルにできていないとなりませんか？

回答No.1

doraneko66

良くわかりませんが、どこでページロード
されているのでしょうか？