异步Javascript

Question

function buildRpt() {
  /* Initialize document here */
  db.transaction(
    function(trn) {
      trn.executeSql(
        'SELECT * FROM table',
        null,
        function(trn,result) {
          for (var iI = 0; iI < result.rows.length; iI++) {
            var row = result.rows.item(iI);

            /* Add record data to document here */
            trn.executeSql(
              'SELECT * FROM detail table WHERE id = ?',
              [ row.id ],
              function (trn,rslt) {
                /* Add detail info to document */
                for (var iTmp = 0; iTmp < rslt.rows.length; iTmp++) {
                  var tmpRow = rslt.rows.item(iTmp);
                  /* update document */
                }
              },
              errorHandler
            );
          }
        },
        errorHandler
      );
    }
  );
}

I need to get information from the client side database and use it to populate a document. I can iterate through the records of a table and I'm fine. However, when I try to do another database query to get detail information for each record, javascript does the inner query asynchronously. I looked at other questions but I am still kind of foggy on how to accomplish this task. In the code above, the nested executeSql is processed asynchronously. The detail information never ends up in the document. Is there a way to get the detail information for each record into the document where it belongs?

Answer 1

I'm not sure what the question is? If the problem is that nothing comes back use console.log to see if data is coming out. The issue is likely due to your reference to the DOM that is being updated. If the issue is getting requests in a particular order read below.

Deferred objects

It would be nice to see if you have a framework available to you. Since you are issuing AJAX requests in a loop, you need something to synchronize those requests as you will not know in what order they will be returned. For example,

 requestRows ->

   rows.each ->

     ajax call -> //These return in any order

If you insist on doing this framework free look into deferred objects, and be prepared to do a lot of work. Otherwise if you use dojo use http://dojotoolkit.org/reference-guide/dojo/Deferred.html or jQuery I have written something that does this: https://gist.github.com/1219564