✨ [Observable] Make observable safe to remove handler while firing.

[mszylkowski]

We need observables to remove handlers safely while firing.

If theres multiple handlers that in the function that remove themselves, only half of the handlers will fire because the iteration doesn't work well with removing items from the iteration.

const observable = new Observable();
for (let i = 0; i < 100; i++) {
    const remove = observable.add(() => {
        console.log(i);
        remove();
    })
}
observable.fire();

This will fire only half of the observers because the fire iteration will remove the items as it goes (simulated run):

// This skips 1/2 of the handlers
for (const handler of this.handlers_) {
    handler();
    this.handlers_.remove(handler);
}

is the same as

// This skips 1/2 of the handlers
for (let i = 0; i < this.handlers_.length; i++) {
    handler();
    this.handlers_.remove(handler);
}

beacuse after each iteration the item that's supposed to go next is at the index i so it gets skipped.

[jridgewell]

This approach would be good with me. Mind splitting this from the other PR?

[jridgewell]

Nit: this isn't capable of reentry, but it may never come up in practice. We could store a local wasIteratingBefore, and only cleanup if !wasIteratingBefore

[mszylkowski]

Do you mind explaining more? Is it that it won't work if it fires the observer again inside a fire handler?

[jridgewell]

Old Code?

[mszylkowski]

Yes, removing it now

[mszylkowski]

This approach would be good with me. Mind splitting this from the other PR?

Sounds good. I'll hold off the other one until this is merged and then sync it.

[mszylkowski]

Added a counter to keep track of the iterating depth so that we can remove the handlers only after all the iterations are done.

[amp-owners-bot]

Hey @jridgewell! These files were changed:

src/core/data-structures/observable.js

[mszylkowski]

cc @ampproject/wg-stories