SQL 트랜잭션 완료 전에 루프 진행

Question

작업중인 데이터베이스 응용 프로그램에 문제가 있습니다. 내 SQL 트랜잭션이 완료되기 전에 내 자바 스크립트 함수가 계속 진행되는 것 같습니다. 아래는 내가 경험하고있는 매우 단순화 된 버전입니다. 실제 함수에서 for 루프의 다음 값으로 이동하기 전에 테이블에 대한 작업을 시도하고 있습니다. for 루프에서 모든 것을 수행 한 다음 SQL 트랜잭션을 완료하는 것으로 보입니다.

function fillTables(){ 
    db.transaction(function (tx){ 
     for(var i=0; i<3; i++){ 
      console.log('Filling row '+i); 
      tx.executeSql(
         'INSERT INTO Numbers (Value) VALUES (?)', 
         [i], 
         function(){ 
          console.log('Inserted Row');  
         }, 
         errorCB); 
      console.log('moving on...'); 
     } 
    }); 
} 

내가 볼 기대 콘솔 로그가 될 것입니다 : 여기

샘플 코드입니다 그러나

Filling Row 0 
Inserted Row 
moving on... 
Filling Row 1 
Inserted Row 
moving on... 
Filling Row 2 
Inserted Row 
moving on... 

, 나는 점점 오전 :

Filling row 0 
moving on... 
Filling row 1 
moving on... 
Filling row 2 
moving on... 
Inserted Row 
Inserted Row 
Inserted Row 

하나를 내가 원하는 결과를 얻을 수있는 방법에 대한 아이디어?

Answer 1

tx.executeSql()은 비동기 함수이며 적절하게 동작합니다. 나는 당신을위한 동기화 방법을 찾고 나의 응답을 편집 할 것이다.

그래서 내가 읽은 것에 따르면 HTML5 사양으로 인해 비동기입니다. 또한 동기식으로 실행하는 경우 어떻게 든 "잘못된 상태"오류가 반환됩니다.

Answer 2

tx.executeSql()은 비동기 함수이므로 함수가 완료되면 재귀 호출을 수행해야합니다.

function fillTables() { 
    db.transaction(function (tx){ 
     var recursiveFunction = function (index, length) { 
      if (index < length) { 
       console.log('Filling row ' + index); 
       tx.executeSql(
        'INSERT INTO Numbers (Value) VALUES (?)', 
        [index], 
        function(){ 
         console.log('Inserted Row'); 
         console.log('moving on...'); 
         recursiveFunction(++index, length);  
        }, 
        errorCB); 
      } 
     } 

     recursiveFunction(0, 3); 
    }); 
}