javascript スライダーのif 文について聞きたいです。

Question

以下のコードをを見てアドバイス願います。

javascriptのことなのですが、

具体的に言うと
var isChanging = false;
このコードで定義された変数を直後の
if (isChanging === true)
という文ですが、
isChangingはfalseです！！って言った後に、
もしtrueなら、、、となるのが、理解できません。

例えるなら、ミステリー小説で犯人はAさんでない！！家族で夕食を食べていたというアリバイがあって家族もそれを証言し不審な点もないからだ。と言った後に、もしそのアリバイがなく、犯人になりえるとしたら、、、
みたいに一度確定したことを、もし～～～ならとなっているのが理解できません。

質問の意図はわかっていただけましたでしょうか？
足りない点がありましたら、指摘お願いします。

// スライダーに表示する画像のパス
var imgList = [
	"images/img01.jpg",
	"images/img02.jpg",
	"images/img03.jpg",
	"images/img04.jpg"
];

// 画像とナビの要素を自動で追加
for(var i = 0; i < imgList.length; i++) {
	// li要素を取得
	var slide = document.createElement("li");
	// li要素の中に画像タグを埋め込む
	slide.innerHTML = "<img src='" + imgList[i] + "'>";
	// li要素をクラス名「slider-inner」の子要素として追加
	document.getElementsByClassName("slider-inner")[0].appendChild(slide);

	// li要素を取得
	var nav = document.createElement("li");
	// プロパティ「data-nav-index」に数値を割り振る
	nav.setAttribute("data-nav-index", i);
	// li要素をクラス名「nav」の子要素として追加
	document.getElementsByClassName("nav")[0].appendChild(nav);
}

// スライドの数を取得(処理のために-1する)
var length = imgList.length - 1;
// クラス名「imageSlide」に画像の1枚の要素を格納
var imageSlide = document.getElementsByClassName("slider-inner")[0].getElementsByTagName("li");
// クラス名「dotNavigation」にドットナビの1つの要素を格納
var dotNavigation = document.getElementsByClassName("nav")[0].getElementsByTagName("li");
// 「現在○○枚目のスライドを表示している」というインデックス番号を格納する変数
var nowIndex = 0;
// 現在表示されている画像とドットナビにクラス名を付ける
imageSlide[nowIndex].classList.add("show");
dotNavigation[nowIndex].classList.add("current");



//見ていただきたいところです



// スライドがアニメーション中か判断するフラグ
var isChanging = false;
// スライドのsetTimeoutを管理するタイマー
var slideTimer;
// スライド切り替え時に呼び出す関数
function sliderSlide(val) {
	if (isChanging === true) {
		return false;
	}
	isChanging = true;
	// 現在表示している画像とナビからクラス名を削除
	imageSlide[nowIndex].classList.remove("show");
	dotNavigation[nowIndex].classList.remove("current");
	nowIndex = val;
	// 次に表示するスライドとナビにカレントクラスを設定
	imageSlide[nowIndex].classList.add("show");
	dotNavigation[nowIndex].classList.add("current");
	// アニメーションが終わるタイミングでisChangingのステータスをfalseに
	slideTimer = setTimeout(function(){
		isChanging = false;
	}, 600);
}

// 左矢印のナビをクリックした時のイベント
document.getElementById("arrow-prev").addEventListener("click", function(){
	var index = nowIndex - 1;
	if(index < 0){
	  index = length;
	}
	sliderSlide(index);
}, false);
// 右矢印のナビをクリックした時のイベント
document.getElementById("arrow-next").addEventListener("click", function(){
	var index = nowIndex + 1;
	if(index > length){
	  index = 0;
	}
	sliderSlide(index);
}, false);
// ドットナビをクリックした時のイベントを作成
for(var i = 0; i < dotNavigation.length; i++) {
	// データ属性のインデックス番号を元にスライドを行う
	dotNavigation[i].addEventListener("click", function(){
		var index = Number(this.getAttribute("data-nav-index"));
		sliderSlide(index);
	}, false);
}

// スライダーに表示する画像のパス
var imgList = [
	"images/img01.jpg",
	"images/img02.jpg",
	"images/img03.jpg",
	"images/img04.jpg"
];

// 画像とナビの要素を自動で追加
for(var i = 0; i < imgList.length; i++) {
	// li要素を取得
	var slide = document.createElement("li");
	// li要素の中に画像タグを埋め込む
	slide.innerHTML = "<img src='" + imgList[i] + "'>";
	// li要素をクラス名「slider-inner」の子要素として追加
	document.getElementsByClassName("slider-inner")[0].appendChild(slide);

	// li要素を取得
	var nav = document.createElement("li");
	// プロパティ「data-nav-index」に数値を割り振る
	nav.setAttribute("data-nav-index", i);
	// li要素をクラス名「nav」の子要素として追加
	document.getElementsByClassName("nav")[0].appendChild(nav);
}

// スライドの数を取得(処理のために-1する)
var length = imgList.length - 1;
// クラス名「imageSlide」に画像の1枚の要素を格納
var imageSlide = document.getElementsByClassName("slider-inner")[0].getElementsByTagName("li");
// クラス名「dotNavigation」にドットナビの1つの要素を格納
var dotNavigation = document.getElementsByClassName("nav")[0].getElementsByTagName("li");
// 「現在○○枚目のスライドを表示している」というインデックス番号を格納する変数
var nowIndex = 0;
// 現在表示されている画像とドットナビにクラス名を付ける
imageSlide[nowIndex].classList.add("show");
dotNavigation[nowIndex].classList.add("current");
// スライドがアニメーション中か判断するフラグ
var isChanging = false;
// スライドのsetTimeoutを管理するタイマー
var slideTimer;
// スライド切り替え時に呼び出す関数
function sliderSlide(val) {
	if (isChanging === true) {
		return false;
	}
	isChanging = true;
	// 現在表示している画像とナビからクラス名を削除
	imageSlide[nowIndex].classList.remove("show");
	dotNavigation[nowIndex].classList.remove("current");
	nowIndex = val;
	// 次に表示するスライドとナビにカレントクラスを設定
	imageSlide[nowIndex].classList.add("show");
	dotNavigation[nowIndex].classList.add("current");
	// アニメーションが終わるタイミングでisChangingのステータスをfalseに
	slideTimer = setTimeout(function(){
		isChanging = false;
	}, 600);
}

// 左矢印のナビをクリックした時のイベント
document.getElementById("arrow-prev").addEventListener("click", function(){
	var index = nowIndex - 1;
	if(index < 0){
	  index = length;
	}
	sliderSlide(index);
}, false);
// 右矢印のナビをクリックした時のイベント
document.getElementById("arrow-next").addEventListener("click", function(){
	var index = nowIndex + 1;
	if(index > length){
	  index = 0;
	}
	sliderSlide(index);
}, false);
// ドットナビをクリックした時のイベントを作成
for(var i = 0; i < dotNavigation.length; i++) {
	// データ属性のインデックス番号を元にスライドを行う
	dotNavigation[i].addEventListener("click", function(){
		var index = Number(this.getAttribute("data-nav-index"));
		sliderSlide(index);
	}, false);
}

.slider {
    position: relative;
    width: 640px;
    height: 480px;
    margin: 0 auto
}

.slider .slider-inner {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.slider .slider-inner li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: all 600ms;
    transition: all 600ms;
    pointer-events: none
}

.slider .slider-inner li.show {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    z-index: 1;
    pointer-events: auto
}

.slider .nav {
    width: 100%;
    margin-top: 20px;
    text-align: center;
    font-size: 0
}

.slider .nav li {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 5px;
    border-radius: 15px;
    background: #ddd;
    cursor: pointer;
    -webkit-transition: background 400ms;
    transition: background 400ms
}

.slider .nav li:hover {
    background: #aaa
}

.slider .nav li.current {
    background: #aaa
}

.slider .arrow {
    position: absolute;
    top: 50%;
    font-size: 20px;
    cursor: pointer;
    width: 20px;
    height: 40px;
    background: #000;
    color: #fff;
    line-height: 40px;
    padding: 5px;
    -webkit-transition: opacity 400ms;
    transition: opacity 400ms
}

.slider .arrow:hover {
    opacity: .7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"
}

.slider .arrow#arrow-prev {
    left: 0;
    -webkit-transform: translate(-100%,-50%);
    transform: translate(-100%,-50%)
}

.slider .arrow#arrow-next {
    right: 0;
    -webkit-transform: translate(100%,-50%);
    transform: translate(100%,-50%)
}

@charset "utf-8";
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

nav ul {
    list-style: none;
}

ul li {
    list-style-type: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

/* change colours to suit your needs */
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

/* change colours to suit your needs */
mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input, select {
    vertical-align: middle;
}

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
また、質問タイトルは問題について具体的に書きましょう。

[m.ts10806]

ご自身はこのコードをどの程度把握しているのでしょうか。
「全部分からないからとりあえず投げとけ」というスタンスだとアドバイス得られにくいかと思います。

[Yasumichi]

kei344 さんのご指摘について補足ですが、今のままだとコードと質問の部分の区別が付きにくくて、回答する方が、ぱっと質問部分を見つけにくいのです。（コードが読みづらいというのもありますが。）

今は、質問するのでやっとかもしれませんが、一旦、回答者の目線になって、自分が回答者だったら、読もうと思うかを検討するといいと思いました。

Answer 1

// スライドがアニメーション中か判断するフラグ
var isChanging = false;
// スライドのsetTimeoutを管理するタイマー
var slideTimer;
// スライド切り替え時に呼び出す関数
function sliderSlide(val) {
  if (isChanging === true) {
    return false;
  }

ここの if 文の話をされているのでしょうか？

だとすると function sliderSlide(val) が呼ばれた時点で評価されるので var isChanging = false; を指定した後にすぐに評価される訳ではないですよ。

【追記】
１　スライドのアニメーションが行われてる間も非同期で実行されるため、再度、sliderSlide() が呼ばれる可能性があります。

２　なので上記の if 判定のあと、すぐに isChanging = true; に変更しています。

３　そして、以下のところでアニメーションが終わるタイミングを待って、isChanging を false に設定しています。

    // アニメーションが終わるタイミングでisChangingのステータスをfalseに
    slideTimer = setTimeout(function(){
        isChanging = false;
    }, 600);

これで２と３の間の処理中に sliderSlide() が呼ばれても何もせずに return という仕組みです。

Comments

[blue1412]

質問の仕方さえ煩雑で。すみません。今すぐに、もう一度編集しますので再びアドバイスいただけるとありがたいです。
お願いします。

[Yasumichi]

上の回答では、納得いかない感じでしょうか？

[blue1412]

はい。
いまわかっているところを書きます。
定義された関数、sliderSlide、は
クリックの際のイベントで呼び出されます。例えば、左クリックをした際は、nowIndexの値が―1となり０より小さいので変数indexの値は3(length)となり、sliderSlideの関数が実行されます。
で、この時点でischangingの変数の値の再定義はさえてないのでfalseのままだと思いますが、このまま関数が実行されても関数内のifはあってもなくてもいいのかなーおもい質問投稿に至ります。

[blue1412]

どうでしょうか？

[Yasumichi]

上の回答の【追記】以下にその部分の説明を加えました。分かりますでしょうか？

[blue1412]

何度もすみません。読んでも理解できませんでした。具体的には「スライドのアニメーションが行われてる間も非同期で実行されるため」の非同期とはどういうことか、ということです。後ろの言葉も理解できてませんが、たぶん、私の力不足だと思います。すみません。
ここで図々しいですが、再び質問させてください。

[Yasumichi]

非同期処理とは、前の文（タスク）の終了を待たずに処理を進めていくことです。
同期処理は、逆に前の文（タスク）の終了を待ち処理を進めることです。
この辺のことが分からないと JavaScript は悩まされることが多いので色々、勉強しましょう。

I-26-2. 非同期処理と同期処理の実装パターンと特徴 | 日本OSS推進フォーラム

非同期処理を制御しようとすると Promise とか async とか await とか覚える必要があります。
http://ossforum.jp/node/753

ちなみに非同期を英語にすると Asynchronous で AJAX の最初の A だったりします。

[blue1412]

var isChanging = false;
(省略）
var isChanging = true;
でどうしてスライド中かどうかを定義できるのですか？

[Yasumichi]

推測が入りますが、CSS でアニメーションが、600ms とか 400ms で実行されるように設定されているので【追記】の２で isChanging = true; に変更して、３の setTimeout で 600ms 待った後、isChanging = false; にして、スライドの切り替えが終了したものとしています。

これで理解できるでしょうか？

[blue1412]

すみません。理解できません。私が使っている参考書には
//スライドにがアニメーションか判断するフラグ。
var isChanging = false; //スライド中ではない。
と書いてあり、この「フラグ」という機能？が理解できてないからでしょうか？

[blue1412]

スライド中かどうかを決めるのに

var = ...

を使って判断するのはメジャーなのですか？

[blue1412]

何度もすみません。私の質問は的を射ていますでしょうか？
遠慮なく指摘お願いします。

[Yasumichi]

ソースが、下のリンクで良いのか、迷いますが。

https://ja.wikipedia.org/wiki/%E3%83%95%E3%83%A9%E3%82%B0_(%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF)

フラグってのは、状態を管理するための変数というイメージですかね。特にフラグという機能があるわけではなく、変数をフラグとして使う感じです。

[Yasumichi]

業務ロジックをどうするかは、判断の分かれるところですが、普通にフラグは使いますね。

参考書の筆者が、スライドにがアニメーションか判断するのにフラグを使おうと決めたから、それを判断基準にしているだけだと思います。

[blue1412]

わかりました。
document.getElementById("arrow-prev").addEventListener("click", function(){
var index = nowIndex - 1;
if(index < 0){
index = length;
}
sliderSlide(index);
}, false);

この文の最後の
,false はどんな役割をもってますか？なんのfalse ですか？

[Yasumichi]

EventTarget.addEventListener() - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

【JavaScript入門】addEventListener()によるイベント処理の使い方！ | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト
https://www.sejuku.net/blog/57625

addEventListener() の三番目の引数で useCapture という項目です。（最初のリンクの２番目の構文です。）

イベントの伝搬方法を指定します。分からないうちは、false にしておけば問題ないと思います。

簡単に言うと例えば、画像とその親要素にそれぞれ'click'イベントを登録した場合、イベントが伝搬するかどうかを決定します。（私も他人に教えられるほど、実験したことはないです。）

[blue1412]

了解です。多分理解できたので本当にできたか見ていただきたいです。何度も何度もすみません。

[blue1412]

クリックが起きた時の状況を口で説明します。
左クリックをすると、変数indexはnowIndexの値を1引いた値となり、
sliderSlideという関数を実行します。indexを引数とし、まず、if文に当たります。ischangingはfalseなので処理は実行されずすぐにischangingはtrueに再定義されます。そして在表示している画像とナビからクラス名を削除し、クリックイベントで変化したnowIndexをvalで定義しなおし、次に表示するスライドとナビにカレントクラスを設定した。最後に一連の処理が終わった後setTimeoutで変わったisChangingを６秒後にfalse に戻す処理をして終了。

ということでしょうか？

[Yasumichi]

正確には、0.6秒後だと思いますが、だいたい合ってると思います。

# ただし、正確に 0.6 秒で実行されるとは限らないという特性がありますが。
# この辺は、setTimeout を Google などで検索して、色々、調べてみてください。

[blue1412]

わかりました。何度も何度も有益なアドバイスありがとうございます。また、お世話になることがありましたら、またよろしくお願いします