Automatic Progress Bar

Question

I'm a newbie in qooxdoo and I'm trying to create an automatic progress bar to use in a "Search" function.

It's seems to stop before the "setTimeout" function so it doesn't change its value

The code I'm using (popup is popup with a VBox layout):

var bar=new hello.automaticProgressBar();
bar.delayedLoop();
popup.add(bar);

My automaticProgressBar.js:

qx.Class.define("hello.automaticProgressBar",
{
  extend : qx.ui.indicator.ProgressBar,

    construct : function()
    {
      this.base(arguments); 
        //var i = 1;

    },
members:{
    i:1,
    delayedLoop : function()
    {
        setTimeout(function ()
        {  
            this.setValue(10*this.i);
            this.i++;                  
            if (this.i < 11)
            {
                alert(this.i);
                this.delayedLoop();         
        }                      
    }, 300)
    }
}
});

Any guess?

Answer 1

You need to change the context of the function argument for setTimeout to the current instance:

setTimeout(function () {  
  this.setValue(10*this.i);
  this.i++;                  
  if (this.i < 11) {
    alert(this.i);
    this.delayedLoop();         
  }                      
}.bind(this), 300);

Answer 2

I think the main culprit is the setTimeout built-in which loses the connection to the local this. I replaced it with qx.event.Timer.once and it works like a charm. See the code in this Playground sample. Press the "Log" button of the Playground to see the log messages.