Question

我需要显示一个倒数计时器，使用延迟任务实现它。代码如下：

var task = Ext.create('Ext.util.DelayedTask', function() {

if (sec < 1 && min > 0) {
    min--;
    sec = 60;
}
if (min == 0 && sec == 1) {
    task.cancel();
}
sec--;
Ext.getCmp('minute').setHtml(min);
Ext.getCmp('second').setHtml(sec);
console.log('minute is' + min + 'second is' + sec);

task.delay(1000);

}, this);

task.delay(1000);

通过上面的实现，函数只被调用一次。看看这个帖子的讨论 Auto Refresh the List in Sencha Touch Application以上代码应该有效。但是，它不起作用。我的代码可能有什么问题？感谢。

Answer 1

据我所知，Ext.util.DelayedTask用于延迟任务而不执行它。这可以用于延迟表单上的Ajax调用，如docs中所示：

此方法对于检测用户是否已完成文本字段输入等内容尤其有用。 [..]你可以使用这个类来缓冲按键事件一定的毫秒数，并且只有当它们停止了那段时间才会执行。

为什么不使用常规的setTimeout？像http://jsfiddle.net/EreaP/这样的东西很完美。

Answer 2

我希望此链接有用

http://developerextensions.com/index.php/sencha-timer-plus-count-component

Answer 3

迟到的回复：

Ext.define('MyApp.view.TimerClock', {
    extend: 'Ext.Container',
    xtype: 'timerClock',
    duration: 3 * 60 * 60, //default to 3 hour
    paused: false,
    clockIntervalHook: undefined,
    config: {
        listeners: {
            initialize: function () {
                this.start();
            }
        }
    },
    start: function () {
        var me = this,
            duration = me.duration,
            updateClock = function () {
                if (me.isPaused()) {
                    return;
                }
                me.setHtml(me.formatTime(duration--));
                if (duration <= 0) {
                    me.stop();
                }
            };
        me.clockIntervalHook = setInterval(updateClock, 1000);
        return me;
    },

    pause: function () {
        this.paused = true;
        return this;
    },

    isPaused: function () {
        return this.paused == true
    },

    resume: function () {
        this.paused = false;
    },

    restart: function () {
        this.stop();
        this.start();
    },

    stop: function () {
        clearInterval(this.clockIntervalHook);
        return this;
    },

    //format the given seconds into "HH:MM:SS" format
    //override this if you need custom behavior
    formatTime: function (seconds) {
        var hours = Math.floor(seconds / 3600);
        hours = hours <= 9 ? "0" + hours : hours;
        seconds %= 3600;
        var minutes = Math.floor(seconds / 60);
        minutes = minutes <= 9 ? "0" + minutes : minutes;
        seconds %= 60;
        seconds = seconds <= 9 ? "0" + seconds : seconds;
        return hours + ":" + minutes + ":" + seconds
    }
});

任何其他视图，只需使用

添加计时器

{ xtype : 'timerClock' }

在Sencha Touch 2中显示倒计时器

3 个答案: