Function with defer that calls itself repeatedly

Question

Function with defer that calls itself repeatedly

I am attempting to utilize a recursive function where each function runs only after the previous one has completed. This is the code I have written:

var service = ['users', 'news'],
    lastSync = {
                 'users' : false,
                 'news' : false
               };
db.transaction(function (tx) {
   lastSyncFunc(tx,service,0).then(function(){
       console.log(lastSync);
   });
});

function lastSyncFunc(tx,service,index){
   deferred = $q.defer();
   tx.executeSql("SELECT time FROM last_sync WHERE fService = ? ORDER BY id DESC LIMIT 1", [service[index]], function (tx, result) {
       if (result.rows.length > 0) {
           lastSync[service[index]] = result.rows.item(0).fTime;
       }
       return ++index<service.length ? lastSyncFunc(tx,service,index) : deferred.resolve();
   });
   return deferred.promise;
}

Currently, my program is returning false for both lastSync.users and lastSync.users because this section is being executed before the function completes.

javascript angularjs deferred angular-promise

Answer 1

Answer №1

It may not always be the best decision to handle manual multiple asynchronous calls.
Consider using $q.all() for a more efficient approach.

Simplify the process by first creating a promisified version for a single query:

const pDbExec = (tx, sql, params = []) => {
  let deferred = $q.defer();
  tx.executeSql(sql, params, (tx, res) => deferred.resolve(res));
  return deferred.promise();
}

The initial step should involve checking if there is already a promisified version available for the library/methods being used.

Then, proceed to call $q.all while mapping your service list into promises:

const SQL_SvcLastSync = `SELECT time FROM ... LIMIT 1`;
db.transaction(tx => {
  $q.all(service.map(svc => pDbExec(tx, SQL_SvcLastSync, [svc])))
    .then(results => 
       results.map(res => 
         res.rows.length > 0 ? res.rows.item(0).fTime : null))
    .then(results => console.log(results));
});

To format results as key/value pairs, you have two options:

Add a reducer:

.then(results => 
  results.reduce((acc, res, i) => (acc[service[i]]=res, acc), {}))

Provide key/value pairs (where values are promises) instead of an array map to $q.all, so they will be resolved under the same keys.
Note that you may need to modify the intermediate mapper in this case.

A simple solution involves adding a parameter to save the same deferred object between recursive calls:

You can try something like this:

function lastSyncFunc(tx, service, index, def){
   var deferred = def || $q.defer();
   tx.executeSql(
     "SELECT time FROM last_sync WHERE fService = ? ORDER BY id DESC LIMIT 1", 
     [service[index]], 
     function (tx, result) {
       if (result.rows.length > 0) {
           lastSync[service[index]] = result.rows.item(0).fTime;
       }
       return ++index<service.length ? 
         lastSyncFunc(tx, service, index, deferred) : 
         deferred.resolve();
   });
   return deferred.promise;
}

This method provides a deferred object to the maximum depth, allowing it to be resolved appropriately.

Answer 2

It may not always be the best decision to handle manual multiple asynchronous calls.
Consider using $q.all() for a more efficient approach.

Simplify the process by first creating a promisified version for a single query:

const pDbExec = (tx, sql, params = []) => {
  let deferred = $q.defer();
  tx.executeSql(sql, params, (tx, res) => deferred.resolve(res));
  return deferred.promise();
}

The initial step should involve checking if there is already a promisified version available for the library/methods being used.

Then, proceed to call $q.all while mapping your service list into promises:

const SQL_SvcLastSync = `SELECT time FROM ... LIMIT 1`;
db.transaction(tx => {
  $q.all(service.map(svc => pDbExec(tx, SQL_SvcLastSync, [svc])))
    .then(results => 
       results.map(res => 
         res.rows.length > 0 ? res.rows.item(0).fTime : null))
    .then(results => console.log(results));
});

To format results as key/value pairs, you have two options:

Add a reducer:

.then(results => 
  results.reduce((acc, res, i) => (acc[service[i]]=res, acc), {}))

Provide key/value pairs (where values are promises) instead of an array map to $q.all, so they will be resolved under the same keys.
Note that you may need to modify the intermediate mapper in this case.

A simple solution involves adding a parameter to save the same deferred object between recursive calls:

You can try something like this:

function lastSyncFunc(tx, service, index, def){
   var deferred = def || $q.defer();
   tx.executeSql(
     "SELECT time FROM last_sync WHERE fService = ? ORDER BY id DESC LIMIT 1", 
     [service[index]], 
     function (tx, result) {
       if (result.rows.length > 0) {
           lastSync[service[index]] = result.rows.item(0).fTime;
       }
       return ++index<service.length ? 
         lastSyncFunc(tx, service, index, deferred) : 
         deferred.resolve();
   });
   return deferred.promise;
}

This method provides a deferred object to the maximum depth, allowing it to be resolved appropriately.

Answer 3

Answer №2

If you want to accomplish this task efficiently, it is recommended to steer clear of recursion as explained in detail here under "The Collection Kerfuffle" section.

The suggested approach involves organizing everything within a db.transaction(function() {...}) framework, but the code becomes more comprehensible if you extract tx.executeSql(...) and convert it into a separate function with promises.

After implementing these changes, your code will resemble something along these lines:

var service = ['users', 'news'],
    lastSync = {
        'users' : false,
        'news' : false
    };
db.transaction(function (tx) {
    return service.reduce(function(promise, serviceItem) {
        return promise.then(function() {
            return executeSqlPromisified(tx, serviceItem).then(function(fTime) {
                if(fTime !== null) {
                    lastSync[serviceItem] = fTime;
                }
            });
        });
    }, $q.when(null)).then(function() {
        console.log(lastSync);
    });
});

function executeSqlPromisified(tx, serviceItem) {
    var deferred = $q.defer();
    tx.executeSql("SELECT time FROM last_sync WHERE fService = ? ORDER BY id DESC LIMIT 1", [serviceItem], function (tx, result) {
        if (result.rows.length) {
            deferred.resolve(result.rows.item(0).fTime);
        } else {
            deferred.resolve(null);
        }
    });
    return deferred.promise;
}

Initially, this format may seem overwhelming, but once you familiarize yourself with this pattern, navigating through the code will become easier.

Answer 4

If you want to accomplish this task efficiently, it is recommended to steer clear of recursion as explained in detail here under "The Collection Kerfuffle" section.

The suggested approach involves organizing everything within a db.transaction(function() {...}) framework, but the code becomes more comprehensible if you extract tx.executeSql(...) and convert it into a separate function with promises.

After implementing these changes, your code will resemble something along these lines:

var service = ['users', 'news'],
    lastSync = {
        'users' : false,
        'news' : false
    };
db.transaction(function (tx) {
    return service.reduce(function(promise, serviceItem) {
        return promise.then(function() {
            return executeSqlPromisified(tx, serviceItem).then(function(fTime) {
                if(fTime !== null) {
                    lastSync[serviceItem] = fTime;
                }
            });
        });
    }, $q.when(null)).then(function() {
        console.log(lastSync);
    });
});

function executeSqlPromisified(tx, serviceItem) {
    var deferred = $q.defer();
    tx.executeSql("SELECT time FROM last_sync WHERE fService = ? ORDER BY id DESC LIMIT 1", [serviceItem], function (tx, result) {
        if (result.rows.length) {
            deferred.resolve(result.rows.item(0).fTime);
        } else {
            deferred.resolve(null);
        }
    });
    return deferred.promise;
}

Initially, this format may seem overwhelming, but once you familiarize yourself with this pattern, navigating through the code will become easier.

Function with defer that calls itself repeatedly

Answer №1

Answer №2

Similar questions

In the present technological landscape, is it still considered beneficial to place Javascript at the bottom of web pages?

Validating email addresses using jQuery regular expressions

Webpack-dev-middleware is serving the bundle on a port that is distinct from the application

Can anyone recommend a drag-and-drop feature in Javascript that functions seamlessly on both iPad and PC devices?

Uninterrupted jQuery AJAX calls

Adjust the position of the content to the bottom for a form-group in Bootstrap v4

What is the best way to eliminate all click event handlers with jQuery?

Setting up a Variable with an Object Attribute in Angular

Change the background color according to the user's input text

The hover functionality fails to activate when a z-index is applied

How to splice or add elements to an array using JavaScript function

Increasing the size of elements with jQuery animate method

Tips for creating dynamic alerts using mui v5 Snackbar

Issue encountered in Angular 2 Heroes Tour, Step 7

What distinguishes defining a function through a prototype versus as a class property?

Automatically pre-fill and send hidden form

having difficulty accessing the value within the Angular constructor

Steps to initiate a slideUp animation on a div using jQuery

Prevent Fixed Gridview Header from being affected by browser Scroll-bar using JQuery

Ways to Access a Variable from One Controller to Another Controller without Utilizing Scope