繰り返し処理の最後に関数を実行させたい

Question

Monacaを利用してiPhoneで画像を取り込むJavaScriptコードを書いています。
現在のところ以下のようなコードになっていまして、画像の取り込みに成功しております。

画像の取り込みが完了したら次の関数(nextStep())を1回実行させたいと思い、下記コード内の現在コメントアウトにしている部分に記述したのですが、この場合ですと画像を10枚取り込むと10回実行されてしまいます。

画像を10枚取り込む操作をしたとき、最後の10枚目の処理後にnextStep()を1回だけ実行させるようなコードにしたいのですが、どのようにコードを修正すると実現するでしょうか？

よろしくお願いいたします。

// 画像を取得する

function getImage() {
  try{
    window.imagePicker.getPictures(
      function(results) {
        var content = '';
        for (var i = 0; i < results.length; i++) {
            camera_success(results[i]); // カメラ起動成功時camera_successを実行
        }
      }, function (error) {
          alert('Error: ' + error);
    }, {
      title: '画像を選択',
      width: 1000,
      height: 1000,
    }
  );
  } catch(e){
      alert(e);
  }
}



// カメラ起動時

function camera_success(results) {
  window.resolveLocalFileSystemURL( results, resolve_success, file_error );
}

function resolve_success(entry) {
  
  var fileExtension = entry.name;
  fileExtension = fileExtension.split('.');
  fileExtension = fileExtension[fileExtension.length-1].toLowerCase();
  
  var randomNumber = Math.floor( Math.random() * 99999 ); // 99999までのランダムな整数（乱数）を生成
  randomNumber = ( '00000' + randomNumber ).slice( -5 );
  
  var d = new Date();
  var n = d.getTime();
  var newFileName = 'image_' + n + '_' + randomNumber + '.' + fileExtension;
  var myFolderApp = 'myFolder';


  window.requestFileSystem( LocalFileSystem.PERSISTENT, 0, function( fileSys ) {
    fileSys.root.getDirectory( myFolderApp,
     {create: true, exclusive: false},
     function( directory ) {
      entry.copyTo( directory, newFileName,

        function move_success(entry) {

          var result = '<img src="' + myFolderApp + '/' + newFileName + '">'; // IMGタグを作成
          $(result).prependTo('.preview'); // HTMLに挿入
        
        
          // ★★★ ここに次に実行させる関数nextStep()を書くと、10枚取り込んだとき10回実行されてしまう ★★★

      
      } ,
      
       file_error );
   },
   file_error );
   },
  file_error );
}
function file_error(error) {
 alert('File System Error:' + error.code);
}

function camera_error(message) {
 alert('Camera Error:' + message);
}

Answer 1

本来はkei344さんやyambejpさんが提示されているPromiseなどを使った処理を行うべきです。
が、とりあえず期待する動作をさせたい、というのであれば以下のように処理する画像の件数を取得し、画像の数と処理件数が一緒になったら、希望の処理をするとかいう乱暴なやり方はあります。

// 追加
var imageLength = 0;
var length;

// 画像を取得する
function getImage() {
  try{
    window.imagePicker.getPictures(
      function(results) {
        var content = '';

        // 追加
        var imageLength = results.length;
        var length = 0;

        for (var i = 0; i < results.length; i++) {
          camera_success(results[i]); // カメラ起動成功時camera_successを実行
        }
      }, function (error) {
        alert('Error: ' + error);
      }, {
        title: '画像を選択',
        width: 1000,
        height: 1000,
      }
    );
  } catch(e){
    alert(e);
  }
}



// カメラ起動時

function camera_success(results) {
  window.resolveLocalFileSystemURL( results, resolve_success, file_error );
}

function resolve_success(entry) {

  var fileExtension = entry.name;
  fileExtension = fileExtension.split('.');
  fileExtension = fileExtension[fileExtension.length-1].toLowerCase();

  var randomNumber = Math.floor( Math.random() * 99999 ); // 99999までのランダムな整数（乱数）を生成
  randomNumber = ( '00000' + randomNumber ).slice( -5 );

  var d = new Date();
  var n = d.getTime();
  var newFileName = 'image_' + n + '_' + randomNumber + '.' + fileExtension;
  var myFolderApp = 'myFolder';


  window.requestFileSystem( LocalFileSystem.PERSISTENT, 0, function( fileSys ) {
    fileSys.root.getDirectory( myFolderApp,
                              {create: true, exclusive: false},
                              function( directory ) {
      entry.copyTo( directory, newFileName,

                   function move_success(entry) {

        var result = '<img src="' + myFolderApp + '/' + newFileName + '">'; // IMGタグを作成
        $(result).prependTo('.preview'); // HTMLに挿入

        // 追加
        length += 1;
        if (imageLength === length) {
          // ★★★ ここに次に実行させる関数nextStep()を書くと、10枚取り込んだとき10回実行されてしまう ★★★
        }
      } ,

                   file_error );
    },
                              file_error );
  },
                           file_error );
}

function file_error(error) {
  alert('File System Error:' + error.code);
}

function camera_error(message) {
  alert('Camera Error:' + message);
}

Comments

[agepan]

ご回答ありがとうございました！
こちらのコードを参考にしまして、取得画像総数をsessionStorageに保存し、for文とif文を使って画像総数と一致したとき＝10枚取得したときに10枚目が処理されたときに関数を実行するコードを書きまして、きちんと動作しております。コード的にはスマートではないかもしれませんが、目的は達成することができました。
ありがとうございました！

Answer 2

グローバル変数に回数を記録して分岐するか、Promiseを使うかどちらかだと思います。

【Promise - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise

【JavaScript Promiseの本】
http://azu.github.io/promises-book/

【今更だけどPromise入門 - Qiita】
http://qiita.com/koki_cheese/items/c559da338a3d307c9d88

【Promiseについて0から勉強してみた - Qiita】
http://qiita.com/toshihirock/items/e49b66f8685a8510bd76

【AngularJS で Promise (defer)を使ってファイルシステムからファイルを読み込む (cordova filesystem) - Qiita】
http://qiita.com/mm36/items/a9869a2066ace1aed0a8

Comments

[agepan]

ご回答ありがとうございます！
Promiseという方法は初めて知りました。ただ自分のJavaScript技量が追いついていなく…きちんと理解するには時間が掛かりそうなので、取り急ぎsessionStorageとfor文、if文を用いて取得画像数と処理数が一致したとき（最終の画像を処理したとき）関数を実行するコードを書きまして、動いております。ただコード的にはPromiseなどを用いる方が正しいとのことですので、これからじっくりと学びたいと思います。ご回答頂き誠にありがとうございました！

Answer 3

一部jQueryで処理しているのでしょうか？
非同期の処理を実装したいなら$.whenや$.Deferredで対応してもいいかもしれません。

Comments

[agepan]

ご回答ありがとうございました！
$.whenという方法を用いてみましたが、途中でエラーになってしまいました（多分にこちらで書いたコードの問題であると思います）。ただ＄.whenという方法は後にすぐ役立ちそうで、とても勉強になる情報でありましたのでメモして保存致しました。ありがとうございました！