Playground: clearInterval is never executed in Timer sample (#15)

[jakub-g]

Here's the code from timer.hsp:

var Timer=klass({
...
    $init:function() {
      this.secondsElapsed=this.initvalue;
      this._iid=setInterval(this.tick.bind(this),1000);
    },
    $dispose:function() {
      clearInterval(this._iid);
    },
    tick:function() {
      console.log("tick");
      this.secondsElapsed++;
      this.$dispose();
    }
});

When you actually open console and play with the sample, you can see that the interval is never cleared, so it will be logging stuff ad infinitum once you've visited sample #15. If you start playing with the code, it gets even worse, because every character you type, the template is recompiled and new interval is established, hence the number of listeners grows with each keystroke.

BTW we have the same kind of issue with InstantAT: when someone creates an @aria:Dialog in his instant, with each keystroke in his template, a new dialog is created and put in front, while the old dialog is not destroyed ( juliandescottes/instantat#16 )

[b-laporte]

Yes - I know this problem for a while. Actually this is linked to a more general problem on how template disposal should be managed.

Today application developers have to explicitely call $dispose(). And the problem of the playground is that samples don't manage the 'output' div (and the playground doesn't know which template is currently displayed). So I was thinking of adding an optional feature (activated by default) so that when calling render() on a template, it would automatically dispose any template currently displayed in the same HTML container (cf. backlog)..