JQ簡單時間應用

用到的函數，事件      

1、delegate('對象','事件',function(){})  事件綁定   點選一次後執行完畢還能繼續點選      

2、click 點選事件      

3、setInterval(方法，定時執行的時間 毫秒)	 定時函數      

4、clearInterval()	//方法可取消由 setInterval() 設定的 timeout。      

5、attr()	//
設定或傳回被選元素的屬性值。
      

6、disabled	//禁用 input 元素。      

學習君呢也是新手 在敲代碼中也遇到了BUG  調呗        

學習君在測試中發現  如果連續點選的時候 就會報錯  按鈕會被一隻禁用  反複調試呢發現 之前學習君把 定時器       
var count = 5;   //計時器      
        
定義成全局的 沒有var 導緻的bug 大家在學習中一定要注意 細心       

一起學習！      

<--HTML-->      

<input type="submit" class="but" value="搜尋">      
   

<-HTML->      

<--定時函數執行任務 JQ 代碼-->      

$(document).delegate('.but','click', function () {
    _this = $('.but');
    var count = 5;   //計時器
    var _keng = setInterval(getTime,1000);   //定時函數
        //定時方法
        function getTime()
        {
            //添加禁止點選屬性 改變按鈕顯示值
            _this.attr('disabled',true).val('請在'+count+'後搜尋');
            //判斷時間
            if(count == 0){
                _this.val('搜尋').removeAttr('disabled');
                clearInterval(_keng);
            }
            count--
        }
})      

<--定時函數執行任務 JQ 代碼-->      
   

效果      

第一次點選後會給按鈕變成灰色 不能點選  倒計時5s後 可以繼續點選      

一起學習！