ajaxでファイルが存在するかを確かめたい。

ajaxを使ってファイルの存在確認をしたいと思っています。
ボタンがクリックされた時にフォルダの有無を確認し、そのフォルダが存在すれば、中の画像ファイルを表示するというコードを作りたいと考えています。
画像ファイルが存在すれば、htmlにコードを追加し、画像を全て挿入するまでループさせる構造にしているのですが、下記の変数checkがずっとtrueのままなのでループが終わりません。

調べるとクロージャーが関係している様なので、色々試してみたのですがどうも上手くいかないのでご教授ください。
他の方法があることは分かっているのですが、ajaxを使った方法でコードを完成させたいので、よろしくお願い致します。

javascript
1
2$("#btn").on('click', function() {
3            
4            $.ajax({
5                url: 'image',
6                type: 'GET',
7                error: function() {
8                    //not exists
9                    alert('Images do not exist. y');
10                },
11                success: function() {
12                    // exists
13                   var check = true;
14                   var i = 1;
15                    while (check==true && i<5) { //i<5は無限ループ対策
16                        (function(check,i){
17                            $.get('image/' + 'image' + i + '.jpg')
18                                  .done(function() { 
19                          // the image exists.
20                                    $("#images").append("HTML内の指定場所にimgタグ追加");
21                                    check = true;
22                                    return check;
23                                                               
24                              }).fail(function() { 
25                             // the image doesn't exist.
26                                    check = false;
27                                    return check;
28                                
29                                 
30                                 })
31                                 alert(check);
32                                 return check;
33                        })(check,i);
34                        i++;
35                    }
36                }
37            });
38
39        });
40

退会済みユーザー

2017/12/09 06:21

どこにあるファイルですか？　クライアントの PC にあるフォルダ / ファイルだとすると、それを JavaScript で探すのは基本的にできませんが？

dounatsu

2017/12/09 07:02

情報不足で申し訳ありません。サーバーにアップロードしたファイルです。自分の環境ではcloud9を使っており、相対パスで指定しています。（cloud9上で絶対パスの指定方法が分からなかったので。）また、簡単なテストコードでファイルの存在は確認できました。

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

回答1件

ベストアンサー

戻り値を受けるcheckがないので常にtrueですね。

javascript
1check = (function(check,i){

そもそもの問題なのですが、dounatsuさんのコードに違和感を覚えます。
ajaxで200が返ってきたら連番で画像を取得するのは、単に二度手間なのでは？
ajaxの戻り値で画像のファイル名を送ってあげる方がスマートでしょう。

投稿2017/12/09 07:57

ooeok

総合スコア469

dounatsu

2017/12/09 08:39

ご回答ありがとうございます。これはfunction(check, i)で始まる即時関数を変数checkに代入する様にすれば良いということでしょうか。これを試したのですが、while文の最後（i++の後）でcheckの値を確認したらずっとtrueでした。（テストファイルだと画像は3枚なので、i=4でfalseになってほしい）また、二度手間というのは一回フォルダの存在を確認した後に中のファイルの存在を確認していることでしょうか。そうであれば本来のコードでは、フォルダ自体がたくさんあるので、一度フォルダの存在自体を確認する目的で作りました。そうでなければ、仰っている意味が理解できなかったので詳しくご教授いただけると幸いです。

ooeok

2017/12/09 13:50

> これはfunction(check, i)で始まる即時関数を変数checkに代入する様にすれば良いということでしょうか。そうです。無名関数の中で使われるcheckは外のスコープのcheckとは別物です。なので無名関数にchekを渡す必要もありません。 > while文の最後（i++の後）でcheckの値を確認したらずっとtrueでした。すみません、ちゃんとdounatsuさんのコードを読んでいませんでした。 $.getは非同期なのでコールバックを取る前にwhile loopが回ってます。今のままのコードではwhileの条件にcheckを使えませんね。 > フォルダ自体がたくさんあるので、一度フォルダの存在自体を確認する目的で作りました。最初のajaxでファルダの存在確認とフォルダ下の画像ファイルのリストをjsonで返してあげればいいんです。サーバ側のプログラムに何を使っているか知りませんが、それほど難しくないはずです。二度手間というか三度手間です。まず$.ajaxと$.get、次に$.getでの画像取得とimgタグをappendして同じ画像を取得と。

dounatsu

2017/12/09 19:34

確かに最初のajaxで全て回せばコードが大分スッキリしますね。ちょっと頭が硬くなっていました。結局のところ非同期のファンクションとループは相性があまりよくないのですね。（相性が良くないというか、少なくともコールバックのタイミングやらスコープなどをしっかり理解していないと活用するのは難しそう）いずれにせよ目標としていたことは達成できそうです。ありがとうございました。

ooeok

2017/12/10 14:15

> 非同期のファンクションとループは相性があまりよくないのですね。ん？ dounatsuさんのコードからすると、そういう返答は出ないはずなんですが・・・。非同期のファンクションがどういうものか理解していて、即時関数と無名関数がわかっているのなら、あのコードは絶対に書きません。最近いろんなところでteratailのよくない噂を耳にしています。私の思い違いならいいのですが・・・。

dounatsu

2018/01/10 20:02

回答だいぶ遅くなって大変申し訳ありません。最近teratailを使っていなくて全く気付きませんでした。よくない噂と言うものが何かは分かりませんが、相性云々のコメントは単純に理解していないと上手く使いこなせないといった意図で特に深い意味はありませんでした。混乱させるような表現で申し訳ありません。

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