jQuery

jQuery deffered

2013.6.4

jQuery deffered について

ajaxでスクリプトを書くときに、ajaxで取った値を基に別のリクエストを送って、返り値を一回目のリクエストと合わせて表示、
なんてことをやる必要があった。
最初recursiveだけで組んでみたが、良い機会なのでdefeerdと組み合わせて使ってみる。かなり見通しが良くなった（と思う）

下の例では、jsonで受け取った結果をflagでrecursive_one, recursive_twoに分けて操作している。
また、json内には順不同でflag = true, false が混在するものとし、true のものから順に展開する。

$(function(){
     $.ajax({
          type:"GET",
          url:jsonfile,
          dataType: "json",
          success:function(data){
               GetResults.getContents_first(data).done(function(data) {         
                    GetResults.getContents_second(data).done(function() {
                         GetResults.finalFunction();
                    });
               });
          },
          error :function(XMLHttpRequest,textStatus){
               console.log(textStatus);
          }
     });
});



var GetResults = {
    getContents_first: function(data) {
        var defer = $.Deferred();

         var total = data.somearticle.length;
         var num = 0;
         var recursive_one = function(){

              var html = "";
              if ( num < total ){

                   if(data.somearticle[num].flag){

                        var html += data.somearticle[num].contents;
                        $("#target").append(html);

                         num++;
                        recursive_one();

                   }else{
                         num++;
                        recursive_one();
                   }

              }else{
                    // call second
                    defer.resolve(data);                        
               }     
          }
         recursive_one();       
          return defer.promise();
      
    },
    getContents_second: function(data) {
        var defer = $.Deferred();

          var total = data.length;
             var num2 = 0;
         var recursive_two = function(){

              var html = "";
               if ( num2 < total ){
                   var html = "";

                   if(!data.somearticle[num2].flag){

                        var html += data.somearticle[num2].contents;
                        $("#target").append(html);

                         num2++;
                        recursive_two();

                   }else{
                         num2++;
                        recursive_two();
                   }

               }else{
                    // call third
                    defer.resolve();                        
               }     
         }
   
         recursive_two();       
          return defer.promise();
   },
   finalFunction : function(data){
             console.log("finish!!")
   }

};

BLOG TOP