How do you know when an indefinitely long promise chain has completely finished?

Question

I was trying to use promises to force serialization of a series of Ajax calls. These Ajax calls are made one for each time a user presses a button. I can successfully serialize the operations like this:

// sample async function
// real-world this is an Ajax call
function delay(val) {
    log("start: ", val);
    return new Promise(function(resolve)  {
        setTimeout(function() {
            log("end: ", val); 
            resolve();
        }, 500);
    });
}

// initialize p to a resolved promise
var p = Promise.resolve();
var v = 1;

// each click adds a new task to 
// the serially executed queue
$("#run").click(function() {
    // How to detect here that there are no other unresolved .then()
    // handlers on the current value of p?
    p = p.then(function() {
        return delay(v++);
    });
});

Working demo: http://jsfiddle.net/jfriend00/4hfyahs3/

But, this builds a potentially never ending promise chain since the variable p that stores the last promise is never cleared. Every new operation just chains onto the prior promise. So, I was thinking that for good memory management, I should be able to detect when there are no more .then() handlers left to run on the current value of p and I can then reset the value of p, making sure that any objects that the previous chain of promise handlers might have held in closures will be eligible for garbage collection.

So, I was wondering how I would know in a given .then() handler that there are no more .then() handlers to be called in this chain and thus, I can just do p = Promise.resolve() to reset p and release the previous promise chain rather than just continually adding onto it.

Answer 1

I'm being told that a "good" promise implementation would not cause accumulating memory from an indefinitely growing promise chain. But, there is apparently no standard that requires or describes this (other than good programming practices) and we have lots of newbie Promise implementations out there so I have not yet decided if it's wise to rely on this good behavior.

My years of coding experience suggest that when implementations are new, facts are lacking that all implementations behave a certain way and there's no specification that says they should behave that way, then it might be wise to write your code in as "safe" a way as possible. In fact, it's often less work to just code around an uncertain behavior than it is to go test all relevant implementations to find out how they behave.

In that vein, here's an implementation of my code that seems to be "safe" in this regard. It just saves a local copy of the global last promise variable for each .then() handler and when that .then() handler runs, if the global promise variable still has the same value, then my code has not chained any more items onto it so this must be the currently last .then() handler. It seems to work in this jsFiddle:

// sample async function
// real-world this is an Ajax call
function delay(val) {
    log("start: ", val);
    return new Promise(function(resolve)  {
        setTimeout(function() {
            log("end: ", val); 
            resolve();
        }, 500);
    });
}

// initialize p to a resolved promise
var p = Promise.resolve();
var v = 1;

// each click adds a new task to 
// the serially executed queue
$("#run").click(function() {
    var origP = p = p.then(function() {
        return delay(v++);
    }).then(function() {
        if (p === origP) {
            // no more are chained by my code
            log("no more chained - resetting promise head");
            // set fresh promise head so no chance of GC leaks
            // on prior promises
            p = Promise.resolve();
            v = 1;
        }
        // clear promise reference in case this closure is leaked
        origP = null;
    }, function() {
        origP = null;
    });
});

Answer 2

… so that I can then reset the value of p, making sure that any objects that the previous chain of promise handlers might have held in closures will be eligible for garbage collection.

No. A promise handler that has been executed (when the promise has settled) is no more needed and implicitly eligible for garbage collection. A resolved promise does not hold onto anything but the resolution value.

You don't need to do "good memory management" for promises (asynchronous values), your promise library does take care of that itself. It has to "release the previous promise chain" automatically, if it doesn't then that's a bug. Your pattern works totally fine as is.

---

How do you know when the promise chain has completely finished?

I would take a pure, recursive approach for this:

function extendedChain(p, stream, action) {
     // chains a new action to p on every stream event
     // until the chain ends before the next event comes
     // resolves with the result of the chain and the advanced stream
     return Promise.race([
         p.then(res => ({res}) ), // wrap in object to distinguish from event
         stream                   // a promise that resolves with a .next promise
     ]).then(({next, res}) =>
         next
           ? extendedChain(p.then(action), next, action) // a stream event happened first
           : {res, next:stream};                         // the chain fulfilled first
     );
}
function rec(stream, action, partDone) {
    return stream.then(({next}) =>
        extendedChain(action(), next, action).then(({res, next}) => {
            partDone(res);
            return rec(next, action, partDone);
        });
    );
}

var v = 1;
rec(getEvents($("#run"), "click"), () => delay(v++), res => {
    console.log("all current done, none waiting");
    console.log("last result", res);
}); // forever

with a helper function for event streams like

function getEvents(emitter, name) {
    var next;
    function get() {
        return new Promise((res) => {
            next = res;
        });
    }
    emitter.on(name, function() {
        next({next: get()});
    });
    return get();
}

(Demo at jsfiddle.net)

Answer 3

It is impossible to detect when no more handlers are added.

It is in fact an undecidable problem. It is not very hard to show a reduction to the halting (or the Atm problem). I can add a formal reduction if you'd like but in handwavey: Given an input program, put a promise at its first line and chain to it at every return or throw - assuming we have a program that solves the problem you describe in this question - apply it to the input problem - we now know if it runs forever or not solving the halting problem. That is, your problem is at least as hard as the halting problem.

You can detect when a promise is "resolved" and update it on new ones.

This is common in "last" or in "flatMap". A good use case is autocomplete search where you only want the latest results. Here is an [implementation by Domenic (https://github.com/domenic/last):

function last(operation) {
    var latestPromise = null; // keep track of the latest

    return function () {
        // call the operation
        var promiseForResult = operation.apply(this, arguments);
        // it is now the latest operation, so set it to that.
        latestPromise = promiseForResult;

        return promiseForResult.then(
            function (value) {
                // if we are _still_ the last value when it resovled
                if (latestPromise === promiseForResult) {
                    return value; // the operation is done, you can set it to Promise.resolve here
                } else {
                    return pending; // wait for more time
                }
            },
            function (reason) {
                if (latestPromise === promiseForResult) { // same as above
                    throw reason;
                } else {
                    return pending;
                }
            }
        );
    };
};

I adapted Domenic's code and documented it for your problem.

You can safely not optimize this

Sane promise implementations do not keep promises which are "up the chain", so setting it to Promise.resolve() will not save memory. If a promise does not do this it is a memory leak and you should file a bug against it.

Answer 4

I tried to check if we can see the promise's state in code, apprantly that is only possible from console, not from code, so I used a flag to moniter the status, not sure if there is a loophole somewhere:

  var p
    , v = 1
    , promiseFulfilled = true;



  function addPromise() {
    if(!p || promiseFulfilled){
      console.log('reseting promise...');
      p = Promise.resolve();
    }
    p = p.then(function() {
        promiseFulfilled = false;
        return delay(v++);
    }).then(function(){
      promiseFulfilled = true;
    });
  }

fiddle demo

Answer 5

You could push the promises onto an array and use Promise.all:

var p = Promise.resolve, 
   promiseArray = [], 
   allFinishedPromise;

function cleanup(promise, resolvedValue) {
    // You have to do this funkiness to check if more promises
    // were pushed since you registered the callback, though.
    var wereMorePromisesPushed = allFinishedPromise !== promise;
    if (!wereMorePromisesPushed) {
        // do cleanup
        promiseArray.splice(0, promiseArray.length);
        p = Promise.resolve(); // reset promise
    }
}

$("#run").click(function() {
    p = p.then(function() {
        return delay(v++);
    });
    promiseArray.push(p)
    allFinishedPromise = Promise.all(promiseArray);
    allFinishedPromise.then(cleanup.bind(null, allFinishedPromise));
});

Alternatively, since you know they are executed sequentially, you could have each completion callback remove that promise from the array and just reset the promise when the array is empty.

var p = Promise.resolve(), 
    promiseArray = [];

function onPromiseComplete() {
    promiseArray.shift();
    if (!promiseArray.length) {
        p = Promise.resolve();
    }
}

$("#run").click(function() {
    p = p.then(function() {
        onPromiseComplete();
        return delay(v++);
    });
    promiseArray.push(p);
});

Edit: If the array is likely to get very long, though, you should go with the first option b/c shifting the array is O(N).

Edit: As you noted, there's no reason to keep the array around. A counter will work just fine.

var p = Promise.resolve(), 
    promiseCounter = 0;

function onPromiseComplete() {
    promiseCounter--;
    if (!promiseCounter) {
        p = Promise.resolve();
    }
}

$("#run").click(function() {
    p = p.then(function() {
        onPromiseComplete();
        return delay(v++);
    });
    promiseCounter++;
});