jQuery Ajax /. 각 콜백, 다음은 'Ajax가 완료되기 전에 각각 발생'

Question

안녕하세요, 폼을 제출하면 자바 스크립트가 호출됩니다.

1) 각 URL에 대해 표에 행을 추가하고 마지막 열 ('상태'열)에 '시작되지 않음'을 추가합니다.
2) 다시 각 루프를 반복합니다. 먼저 0에서 100까지 백분율을 반환하는 상태 (status.php)를 확인하기 위해 ajax 호출을합니다.
3) 동일한 루프에서 실제 프로세스를 통해 아약스 (process.php), 프로세스가 완료되면 (마음에 지속적인 상태 업데이 트를 염두에두고), 그때 그것은 상태 열에 "완료"라고 말하고 auto_refresh를 종료합니다.
4) 다음 '각'으로 이동해야하며 다음 URL에 대해 동일하게 수행해야합니다.

function formSubmit(){ 

    var lines = $('#urls').val().split('\n'); 

    $.each(lines, function(key, value) { 
     $('#dlTable tr:last').after('<tr><td>'+value+'</td><td>Not Started</td></tr>'); 
    }); 

    $.each(lines, function(key, value) { 

     var auto_refresh = setInterval(function() { 
      $.ajax({ 
       url: 'status.php', 
       success: function(data) { 
      $('#dlTable').find("tr").eq(key+1).children().last().replaceWith("<td>"+data+"</td>"); 
       } 
      }); 
     }, 1000); 

     $.ajax({ 
      url: 'process.php?id='+value, 
      success: function(msg) { 
     clearInterval(auto_refresh); 
     $('#dlTable').find("tr").eq(key+1).children().last().replaceWith("<td>completed rip</td>"); 
      } 
     }); 

    }); 

} 

Answer 1

원하는대로 여러 개의 비동기 작업 을 순서대로 실행하면, 맞습니까? 시퀀스 헬퍼 (sequence helper)를 통해 실행하고 실행하는 배열을 만들 수 있습니다. 당신이 볼 수 있듯이

https://github.com/michiel/asynchelper-js/blob/master/lib/sequencer.js

var actions = []; 
$.each(lines, function(key, value) { 

    actions.push(function(callback) { 
     $.ajax({ 
      url: 'process.php?id='+val, 
      success: function(msg) { 
      clearInterval(auto_refresh); 

      // 
      // Perform your DOM operations here and be sure to call the 
      // callback! 
      // 

      callback(); 
      } 
     }); 
    }); 
    } 
); 

, 우리는 인수로 임의의 콜백을 범위 기능의 배열을 구축 할 수 있습니다. 시퀀서가 순서대로 실행합니다.

는

var sequencer = new Sequencer(actions); 
sequencer.start(); 

몇 줄의 코드에 시퀀서 기능을 정의하기 위해, BTW, 수는 github의 링크에서 시퀀스 도우미를 사용하여 실행합니다. 예 :

function sequencer(arr) { 
    (function() { 
     ((arr.length != 0) && (arr.shift()(arguments.callee))); 
    })(); 
} 

Answer 2

AJAX는 비동기입니다.

그게 정확히 일어난 일입니다.

each을 사용하는 대신 다음 AJAX 요청을 이전 AJAX 완료 처리기에서 보내야합니다.

Answer 3

나는이 코드는 당신에게 루프와 아약스와 콜백을 사용하는 방법 약간의 아이디어를 줄 것이다이 jquery json populate table

같은 대답을 줄 것이다. 그러나 나는 그것을 테스트하지 않았고 버그가있을 것입니다. 나는 내 이전 코드에서 다음과 같은 유래 : - 당신은 또한 "비동기"속성을 사용하여 동 기적으로 실행하는 AJAX를 설정할 수 있습니다

var processCnt; //Global variable - check if this is needed 
function formSubmit(){ 

    var lines = $('#urls').val().split('\n'); 

    $.each(lines, function(key, value) { 
     $('#dlTable tr:last').after('<tr><td>'+value+'</td><td>Not Started</td></tr>'); 
    }); 

    completeProcessing(lines ,function(success) 
    { 
      $.ajax({ 
      url: 'process.php?id='+value, 
      success: function(msg) { 
       $('#dlTable').find("tr").eq(key+1).children().last().replaceWith("<td>completed rip</td>"); 
      } 
     }); 


    }); 


} 

//Following two functions added by me 
function completeProcessing(lines,callback) 
{ 
    processCnt= 0; 
    processingTimer = setInterval(function() { singleProcessing(lines[processCnt],function(completeProcessingSuccess){ if(completeProcessingSuccess){ clearInterval(processingTimer); callback(true); }})}, 1000);  

} 


function singleProcessing(line,callback) 
{ 
    key=processCnt; 
    val = line; 
    if(processCnt < totalFiles) 
    { //Files to be processed 

     $.ajax({ 
        url: 'status.php', 
        success: function(data) { 
          $('#dlTable').find("tr").eq(key+1).children().last().replaceWith("<td>"+data+"</td>"); 
         processCnt++; 
         callback(false); 

        } 
       }); 
    } 
    else 
    { 
     callback(true); 

    }  
} 

Answer 4

. 다음을 추가하십시오.

$.ajax({ "async": false, ... other options ... }); 

AJAX API 참조 here. 요청이 완료 될 때까지 브라우저가 잠기 게됩니다.

나는 SLaks 대답 (비동기 행동으로 고수)에서 접근 방식을 선호합니다. 그러나 이는 응용 프로그램에 따라 다릅니다. 주의하십시오.