[JQUERY] jQuery를 사용하여 비동기 Ajax 요청을 병렬

jQuery를 사용하여 비동기 Ajax 요청을 병렬

해결법

1. ---

   1.병렬 쿼리의 특정 번호를 지원할 수있는이 솔루션을 사용해보십시오 :

   병렬 쿼리의 특정 번호를 지원할 수있는이 솔루션을 사용해보십시오 :

   var done = 4; // number of total requests
   var sum = 0;
   
   /* Normal loops don't create a new scope */
   $([1,2,3,4,5]).each(function() {
     var number = this;
     $.getJSON("/values/" + number, function(data) {
       sum += data.value;
       done -= 1;
       if(done == 0) $("#mynode").html(sum);
     });
   });
   

2. ---

   2.jQuery를 $ .when ()와 $되는 .done () 정확히 무엇을 필요가있다 :

   jQuery를 $ .when ()와 $되는 .done () 정확히 무엇을 필요가있다 :

   $.when($.ajax("/page1.php"), $.ajax("/page2.php"))
     .then(myFunc, myFailure);
   

3. ---

   3.여기 내 시도는 직접 질문을 해결에서의

   여기 내 시도는 직접 질문을 해결에서의

   기본적으로, 당신은 단지, 그리고 AJAX 호출 스택을 구축 그들 모두를 실행하고, 제공되는 기능은 모든 이벤트가 완료되면 호출 - 제공된 인수는 모든 제공된 Ajax 요청의 결과의 배열 인.

   분명이 초기 코드 - 당신은 유연성의 측면이 더 정교한 얻을 수 있습니다.

   <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
   <script type="text/javascript">
   
   var ParallelAjaxExecuter = function( onComplete )
   {
     this.requests = [];
     this.results = [];
     this.onComplete = onComplete; 
   }
   
   ParallelAjaxExecuter.prototype.addRequest = function( method, url, data, format )
   {
     this.requests.push( {
         "method"    : method
       , "url"       : url
       , "data"      : data
       , "format"    : format
       , "completed" : false
     } )
   }
   
   ParallelAjaxExecuter.prototype.dispatchAll = function()
   {
     var self = this;
     $.each( self.requests, function( i, request )
       {
       request.method( request.url, request.data, function( r )
       {
         return function( data )
         {
           console.log
           r.completed = true;
           self.results.push( data );
           self.checkAndComplete();
         }
       }( request ) )
     } )
   }
   
   ParallelAjaxExecuter.prototype.allRequestsCompleted = function()
   {
     var i = 0;
     while ( request = this.requests[i++] )
     {
       if ( request.completed === false )
       {
         return false;
       }
     }
     return true;
   },
   
   ParallelAjaxExecuter.prototype.checkAndComplete = function()
   {
     if ( this.allRequestsCompleted() )
     {
       this.onComplete( this.results );
     }
   }
   
   var pe = new ParallelAjaxExecuter( function( results )
   {
     alert( eval( results.join( '+' ) ) );
   } );
   
   pe.addRequest( $.get, 'test.php', {n:1}, 'text' );
   pe.addRequest( $.get, 'test.php', {n:2}, 'text' );
   pe.addRequest( $.get, 'test.php', {n:3}, 'text' );
   pe.addRequest( $.get, 'test.php', {n:4}, 'text' );
   
   pe.dispatchAll();
   
   </script>
   

   여기의 test.php

   <?php
   
   echo pow( $_GET['n'], 2 );
   
   ?>
   

4. ---

   4.업데이트 : Yair Leviel에 의해 주어진 대답은 당이 대답은 사용되지 않습니다. jQuery.when () 또는 Q.js. 같은 약속 라이브러리를 사용하여

   업데이트 : Yair Leviel에 의해 주어진 대답은 당이 대답은 사용되지 않습니다. jQuery.when () 또는 Q.js. 같은 약속 라이브러리를 사용하여

   내가 jQuery를 확장 같은 범용 솔루션을 만들었습니다. 일부 미세 조정을 사용할 수 없습니다 것은 일반적인 만들지 만, 내 요구에 적합합니다. 이 글을 쓰는 시점 기준으로 본 게시물에 다른 이상이 기술의 장점은 콜백 비동기 처리의 모든 유형을 사용할 수 있었다.

   참고 : 내 클라이언트가 아직 다른-타사 라이브러리에 대한 종속성을 복용 괜찮을 것이라고 생각하면 내가 대신이의 자바 스크립트를 수신 확장 기능을 사용하십시오 :

   // jQuery extension for running multiple async methods in parallel
   // and getting a callback with all results when all of them have completed.
   //
   // Each worker is a function that takes a callback as its only argument, and
   // fires up an async process that calls this callback with its result.
   //
   // Example:
   //      $.parallel(
   //          function (callback) { $.get("form.htm", {}, callback, "html"); },
   //          function (callback) { $.post("data.aspx", {}, callback, "json"); },
   //          function (formHtml, dataJson) { 
   //              // Handle success; each argument to this function is 
   //              // the result of correlating ajax call above.
   //          }
   //      );
   
   (function ($) {
   
       $.parallel = function (anyNumberOfWorkers, allDoneCallback) {
   
       var workers = [];
       var workersCompleteCallback = null;
   
       // To support any number of workers, use "arguments" variable to
       // access function arguments rather than the names above.
       var lastArgIndex = arguments.length - 1;
       $.each(arguments, function (index) {
           if (index == lastArgIndex) {
               workersCompleteCallback = this;
           } else {
               workers.push({ fn: this, done: false, result: null });
           }
       });
   
       // Short circuit this edge case
       if (workers.length == 0) {
           workersCompleteCallback();
           return;
       }
   
       // Fire off each worker process, asking it to report back to onWorkerDone.
       $.each(workers, function (workerIndex) {
           var worker = this;
           var callback = function () { onWorkerDone(worker, arguments); };
           worker.fn(callback);
       });
   
       // Store results and update status as each item completes.
       // The [0] on workerResultS below assumes the client only needs the first parameter
       // passed into the return callback. This simplifies the handling in allDoneCallback,
       // but may need to be removed if you need access to all parameters of the result.
       // For example, $.post calls back with success(data, textStatus, XMLHttpRequest).  If
       // you need textStatus or XMLHttpRequest then pull off the [0] below.
       function onWorkerDone(worker, workerResult) {
           worker.done = true;
           worker.result = workerResult[0]; // this is the [0] ref'd above.
           var allResults = [];
           for (var i = 0; i < workers.length; i++) {
               if (!workers[i].done) return;
               else allResults.push(workers[i].result);
           }
           workersCompleteCallback.apply(this, allResults);
       }
   };
   
   })(jQuery);
   

5. ---

   5.병렬로 실행되는 여러 AJAX 요청

   병렬로 실행되는 여러 AJAX 요청

   API를 사용하여 작업 할 때, 당신은 때때로 다른 엔드 포인트에 여러 AJAX 요청을 발행해야합니다. 대신 다음을 실행하기 전에 전체에 하나 개의 요청을 기다리고, 당신은 jQuery의 $ .when () 함수를 사용하여 병렬로 데이터를 요청하여 jQuery로 일 최대 속도를 높일 수 있습니다 :

   JS

   $.when($.get('1.json'), $.get('2.json')).then(function(r1, r2){
      console.log(r1[0].message + " " + r2[0].message);
   });
   

   이러한 GET 요청을 모두 성공적으로 완료되면 콜백 함수가 실행됩니다. $ .when는 () () 호출이 $의 갔지에 의해 반환 약속을 받아, 새로운 약속 오브젝트를 구축합니다. 콜백의 R1 및 R2 인수는 그 첫번째 요소는 서버 응답을 포함 배열이다.

6. ---

   6.허용 대답은 훨씬 더 나은 뭔가 변경 되었기 때문에 UPDATE 그리고 또 2 년 후,이 모습은 미친! (비록 여전히 Yair Leviel의 답변으로 좋은으로 jQuery의 경우 사용 안 함)

   허용 대답은 훨씬 더 나은 뭔가 변경 되었기 때문에 UPDATE 그리고 또 2 년 후,이 모습은 미친! (비록 여전히 Yair Leviel의 답변으로 좋은으로 jQuery의 경우 사용 안 함)

   18개월 후, 난 그냥 비슷한 일을했다. 나는 새로 고침 버튼이 있고, 나는 페이드 아웃에 이전 내용 다음 fadeIn에 새로운 콘텐츠를 원한다. 그러나 나는 또한 새로운 콘텐츠를 얻을 필요가있다. 페이드 아웃 및 가져 오기는 비동기하지만 직렬을 실행하는 데 시간 낭비 일 것이다.

   내가 뭘하는 재사용 가능한 함수의 형태를 제외하고, 정말 허용 대답과 동일합니다. 그것의 주요 미덕은 여기에 다른 제안보다 훨씬 짧은 것입니다.

   var parallel = function(actions, finished) {
   
     finishedCount = 0;
     var results = [];
   
     $.each(actions, function(i, action) {
   
       action(function(result) {
   
         results[i] = result;
         finishedCount++;
   
         if (finishedCount == actions.length) {
           finished(results);
         }
       });
     });
   };
   

   당신은 그것을 병렬로 실행하는 기능의 배열을 전달합니다. 각각의 기능은 그 결과를 (만약 있다면)에 전달되는 다른 기능을 허용한다. 그 기능을 제공 할 것이다 평행.

   또한 모든 작업이 완료 될 때 호출 할 그것을 함수를 전달합니다. 이 모든 결과 배열을 받게됩니다 내 예를했다 그래서. :

   refreshButton.click(function() {
   
     parallel([
          function(f) { 
            contentDiv.fadeOut(f); 
          },
          function(f) { 
            portlet.content(f); 
          },
        ], 
        function(results) {
         contentDiv.children().remove();
         contentDiv.append(results[1]);
         contentDiv.fadeIn();
     });
   });
   

   내 새로 고침 단추를 클릭 할 때, 내가 jQuery의 페이드 아웃 효과 또한 내 자신의 portlet.content 기능 실행 (비동기 GET을 수행, 내용의 새로운 비트를 구축하고 그것을 통과), 그리고 모두 완료되면 그때 이전을 제거 콘텐츠 (결과 [1]) 제 기능 fadeIn 새로운 콘텐츠의 결과를 추가.

   페이드 아웃이 종료 함수 것도 통과하지 않는 I는 무시되므로 결과 [0] 아마도 미정 포함. 당신이 유용한 결과 세 가지 작업이 있다면, 그들은 결과 배열에 각 슬롯은, 같은 순서로 당신은 기능을 전달한다.

7. ---

   7.당신이 뭔가를 할 수 있습니다

   당신이 뭔가를 할 수 있습니다

   var allData = []
   $.getJSON("/values/1", function(data) {
       allData.push(data);
       if(data.length == 2){
         processData(allData) // where process data processes all the data
       }
   });
   
   $.getJSON("/values/2", function(data) {
       allData.push(data);
       if(data.length == 2){
           processData(allData) // where process data processes all the data
       }
   });
   
   var processData = function(data){
        var sum = data[0] + data[1]
        $('#mynode').html(sum);
   }
   

8. ---

   8.여기 mbostock / 큐를 사용하여 구현입니다 :

   여기 mbostock / 큐를 사용하여 구현입니다 :

   queue()
     .defer(function(callback) {
       $.post('/echo/json/', {json: JSON.stringify({value: 1}), delay: 1}, function(data) {
         callback(null, data.value);
       });
     })
     .defer(function(callback) {
       $.post('/echo/json/', {json: JSON.stringify({value: 3}), delay: 2}, function(data) {
         callback(null, data.value);
       });
     })
     .awaitAll(function(err, results) {
       var result = results.reduce(function(acc, value) {
         return acc + value;
       }, 0);
       console.log(result);
     });
   

   관련 바이올린 : http://jsfiddle.net/MdbW2/

9. ---

   9.(이 작업을 수행 할 수있는 독립 함수로 기록 될 수에 JQuery와의 다음과 같은 확장자 :

   (이 작업을 수행 할 수있는 독립 함수로 기록 될 수에 JQuery와의 다음과 같은 확장자 :

   $.whenAll({
       val1: $.getJSON('/values/1'),
       val2: $.getJSON('/values/2')
   })
       .done(function (results) {
           var sum = results.val1.value + results.val2.value;
   
           $('#mynode').html(sum);
       });
   

   JQuery와 (1.x에서) 확장 whenAll () :

   $.whenAll = function (deferreds) {
       function isPromise(fn) {
           return fn && typeof fn.then === 'function' &&
               String($.Deferred().then) === String(fn.then);
       }
       var d = $.Deferred(),
           keys = Object.keys(deferreds),
           args = keys.map(function (k) {
               return $.Deferred(function (d) {
                   var fn = deferreds[k];
   
                   (isPromise(fn) ? fn : $.Deferred(fn))
                       .done(d.resolve)
                       .fail(function (err) { d.reject(err, k); })
                   ;
               });
           });
   
       $.when.apply(this, args)
           .done(function () {
               var resObj = {},
                   resArgs = Array.prototype.slice.call(arguments);
               resArgs.forEach(function (v, i) { resObj[keys[i]] = v; });
               d.resolve(resObj);
           })
           .fail(d.reject);
   
       return d;
   };
   

   jsbin 예를 참조하십시오 : http://jsbin.com/nuxuciwabu/edit?js,console

10. ---

    10.나를 위해 가장 전문적인 솔루션과 같이 async.js 및 Array.reduce을 사용하여 다음과 같습니다

    나를 위해 가장 전문적인 솔루션과 같이 async.js 및 Array.reduce을 사용하여 다음과 같습니다

            async.map([1, 2, 3, 4, 5], function (number, callback) {
                $.getJSON("/values/" + number, function (data) {
                    callback(null, data.value);
                });
            }, function (err, results) {
                $("#mynode").html(results.reduce(function(previousValue, currentValue) {
                    return previousValue + currentValue;
                }));
            });
    

11. ---

    11.하나 개의 요청의 결과가 다른에 의존하는 경우, 당신은 그들이 평행 할 수 없습니다.

    하나 개의 요청의 결과가 다른에 의존하는 경우, 당신은 그들이 평행 할 수 없습니다.

12. ---

    12.Yair의 대답에 구축. 동적 아약스 약속을 정의 할 수 있습니다.

    Yair의 대답에 구축. 동적 아약스 약속을 정의 할 수 있습니다.

    var start = 1; // starting value
    var len = 2; // no. of requests
    
    var promises = (new Array(len)).fill().map(function() {
        return $.ajax("/values/" + i++);
    });
    
    $.when.apply($, promises)
      .then(myFunc, myFailure);
    

13. ---

    13.당신은 파일 이름의 배열을 가정 해 봅시다.

    당신은 파일 이름의 배열을 가정 해 봅시다.

    var templateNameArray=["test.html","test2.html","test3.html"];
    
    htmlTemplatesLoadStateMap={};
    var deffereds=[];
      for (var i = 0; i < templateNameArray.length; i++)
           {
            if (!htmlTemplatesLoadStateMap[templateNameArray[i]]) 
                {         
                  deferreds.push($.get("./Content/templates/" +templateNameArray[i], 
    
                      function (response, status, xhr) {
                          if (status == "error") { } 
                            else {
                                    $("body").append(response);
                                   }
                             }));             
    htmlTemplatesLoadStateMap[templateNameArray[i]] = true;
                           }
                      }
                                          $.when.all(deferreds).always(function(resultsArray) {   yourfunctionTobeExecuted(yourPayload);
                                    });
    

from https://stackoverflow.com/questions/1060539/parallel-asynchronous-ajax-requests-using-jquery by cc-by-sa and MIT license