javascript - 自动进度条

Question

我是 qooxdoo 的新手，我正在尝试创建一个自动进度条以在“搜索”功能中使用。

它似乎在“setTimeout”函数之前停止，所以它不会改变它的值

我正在使用的代码（弹出是带有 VBox 布局的弹出）：

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

我的自动ProgressBar.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)
    }
}
});

有什么猜测吗？

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

我认为罪魁祸首是setTimeout内置的，它失去了与本地的连接this。我用它代替了它，qx.event.Timer.once它就像一个魅力。请参阅此Playground 示例中的代码。按 Playground 的“日志”按钮查看日志消息。