Sencha Touch实现按钮点击倒计时

首先发送一个AJAX请求到服务器,返回结果如果正确才开始倒计时(其它代码省略):

var me = this;
Ext.Ajax.request({
    url: 'account/getCode',
    params:{
        phone: phone
    },success:function(response){
        var text = Ext.decode(response.responseText); //这是返回结果
        var task = Ext.create('Ext.util.DelayedTask',function(){
            me.updateClock(120); //设置120秒的倒计时时间
        });
        task.delay(1000); //一秒后执行调用updateClock函数
    },failure:function(){
        Ext.Msg.alert('请求服务器失败,请检查网络');
    }
});

这是updateClock函数:

updateClock:function(num){
    var me = this;
    Ext.getCmp('get_auth_code').setText(num-1); //获取验证码按钮的ID并设置text值
    var task = Ext.create('Ext.util.DelayedTask',function(){
        me.updateClock(num-1); //调用updateClock函数本身
    });
    if(num <= 1){
        task.cancel(); //当倒数到0时停止
    }else{
        task.delay(1000); //一秒后再调用updateClock函数本身
    }
}

这样就实现了点击按钮后AJAX提交后开始倒数。同理,如果要点击按钮直接倒数可以在按钮的点击事件触发时,运行:

var task = Ext.create('Ext.util.DelayedTask',function(){
            me.updateClock(120); //设置120秒的倒计时时间
        });
        task.delay(1000); //一秒后执行调用updateClock函数

就可以了!

你可能感兴趣的:(Sencha Touch实现按钮点击倒计时)