동기화 코드

Question

나는 데이터를 얻기 위해 getPropertyId 함수로 아약스를 호출한다. 콜백을 사용하여 결과를 얻은 다음 사용합니다. 내 문제는 두 번째 각 루프가 함수 안에 넣을지라도 첫 번째 루프가 끝나기 전에 시작된다는 것입니다. 첫 번째 코드가 끝난 후 두 번째 루프를 시작하기 위해 코드를 동기화 할 수 있습니까? 감사

Plugins.DataHelper.getPropertyId(PropertyID, function(data){ 
    //code using data retrived with getPropertyId function 

    $.each(list, function(index,value){ 
    //code "A" containing asynchronous calls 
    }); 
}); 

$.each(filtredList, function(index,value){ 
    //code "B" 
}); 

Answer 1

이것은 JavaScript의 특성이므로 나중에 비슷한 문제가 발생하지 않도록 이벤트 기반 프로그래밍에 익숙해 져야합니다.

는 기본적으로 그 같은 작업을해야합니다 :

Plugins.DataHelper.getPropertyId(PropertyID, function(data){ 
    //code using data retrived with getPropertyId function 

    $.each(list, function(index,value){ 
     //code "A" 
    }); 
    $.each(filtredList, function(index,value){ 
     //code "B" 
    }); 
}); 

당신이 AJAX는 "코드 A"내부 호출하고 있습니다 그러하지 아니하다. 이 경우 운이 없으므로 동기 호출 (일반적으로 나쁜 생각)을 사용하거나 이벤트를 기반으로 작업하도록 코드를 다시 작성하도록 "코드 A"를 변경해야합니다.

하나의 아이디어는 처리 할 요소의 수를 결정한 다음 각 항목이 처리 된 후 콜백을 호출하는 것입니다. 이 콜백은 모든 항목이 처리되었는지 확인해야합니다 (카운터를 증가시키고 처리 할 항목 수와 비교).이 메커니즘은 잠금이 작동하는 것과 유사합니다. 함수가 모든 항목을 처리했다고 판단하면 일부 작업을 수행합니다 (그렇지 않은 경우).

Answer 2

당신은 정말 syncronised (= 차단) 요청을 만들 수 있지만, 그것은 아주 나쁜 브라우저 동작입니다. 콜백 함수가 작동하도록하는 것이 훨씬 낫습니다. 따라서 첫 번째 Ajax 호출이 완료되면 (성공/오류) 코드를 "계속"해야합니다.

Plugins.DataHelper.getPropertyId(PropertyID, function(data){ 
    XHRobject.onreadystatechange = function() { 
     if(XHRobject.readyState === 4) { 
      $.each(list, function(index,value){ 
       //code "A" 
      }); 
     } 
    } 
}); 

주, 그 원리를 설명하는 간략화 된 예이다. jQuery에 태그를 추가 했으므로 promise 객체를 호출하여 매우 georgous하게 만들 수 있습니다. 보이는 모양

Plugins.DataHelper.getPropertyId(PropertyID, function(data){ 
    $.ajax({}).done(function() { 
     $.each(list, function(index,value){ 
      //code "A" 
     }); 
    }); 
}); 

Answer 3

첫 번째 부분은 ajax 호출이 완료 될 때까지 대기합니다.

그 동안 스크립트는 계속 진행되고 두 번째 스크립트가 계속 수행됩니다.

첫 번째 각 루프 바로 다음에 두 번째를 넣으려고했습니다.

Answer 4

당신은 기존의 Lock 의미

Plugins.DataHelper.lock = false;//release 
Plugins.DataHelper.getPropertyId(PropertyID, function(data){ 
    //code using data retrived with getPropertyId function 

    $.each(list, function(index,value){ 
     Plugins.DataHelper.lock = true;//acquire 
     //code "A" 
     Plugins.DataHelper.lock = false;//release 
    }); 
}); 
while(Plugins.DataHelper.lock) 
    continue;//wait until released 
$.each(filtredList, function(index,value){ 
    //code "B" 
}); 

을 사용할 수 있습니다 또는 당신은 당신의 아약스 XHR의 마무리 콜백 후 호출하는 다음 기능을 추가 할 수 있습니다.

var nextF = function(){}; 
Plugins.DataHelper.getPropertyId(PropertyID, function(data){ 
    //code using data retrived with getPropertyId function 

    $.each(list, function(index,value){ 
     //code "A" 
     nextF(); 
    }); 
}); 
nextF = function(){ 
$.each(filtredList, function(index,value){ 
    //code "B" 
}); 
}//You need to pass the scope to the nextF function like nextF.call(scope) where scope is cached somewhere 

Answer 5

당신과 같이 콜백 함수 내에서 '각'호출 두 번째를 이동하여이를 달성 할 수 있어야한다 :

Plugins.DataHelper.getPropertyId(PropertyID, function(data){ 
    //code using data retrived with getPropertyId function 

    $.each(list, function(index,value){ 
    //code "A" 
    }); 

    $.each(filtredList, function(index,value){ 
    //code "B" 
    }); 
}); 

편집 : 자세한 내용은이 문서 체크 아웃 : flow control in javascript