1. 程式人生 > >JS中的window.setTimeout()詳解

JS中的window.setTimeout()詳解

相關用法:

setTimeout (表示式,延時時間)
setInterval (表示式,互動時間)
其中延時時間/互動時間是以豪秒為單位的(1000ms=1s)

setTimeout在執行時,是在載入後延遲指定時間後,去執行一次表示式,僅執行一次
setInterval在執行時,它從載入後,
每隔指定的時間就執行一次表示式

1,基本用法:

  var i=0;
   setTimeout("i+=1;alert(i)",1000);
   執行一個函式
  var i=0;
   setTimeout(function(){i+=1;alert(i);},1000);
     //注意上面的兩種方法的不同

   下面再來一個執行函式:
  var i=0;
   function test(){
       i+=1;
       alert(i);
   }
   setTimeout("test()",1000);
   也可以這樣:
   setTimeout(test,1000);

總結:
   setTimeout的原型是這樣的:
  
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])
  
setTimeout有
兩種形式

setTimeout(code,interval)
setTimeout(func,interval,args)

其中code是一個字串
     func是一個函式.

注意"函式"的意義,是一個表示式,而不是一個語句.
比如你想週期性執行一個函式
function a(){
      //...
}
可寫為
setTimeout("a()",1000)

setTimeout(a,1000)

這裡注意第二種形式中,是a,不要寫成a(),

展開來說,不管你這裡寫的是什麼,如果是一個變數,一定是一個指向某函式的變數;如果是個函式,那它的返回值就 要是個函式

2,用setTimeout實現setInterval的功能
    思路很簡單,就是在一個函式中呼叫不停執行自己,有點像遞迴
   var i=0;
    function xilou(){
        i+=1;
        if(i>10){alert(i);return;}
        setTimeout("xilou()",1000);
        //用這個也可以
        //setTimeout(xilou,1000);
    }

   ((插曲:介紹一下return:

描述
從當前函式退出,並從那個函式返回一個值。
語法

return [expression];

expression引數是要從函式返回的值。如果省略,則該函式不返回值。

----------------------------------------------------------------------------------------------

setInterval和setTimeout是相似的但有些不同。最大的區別是setInterval創

建一個動作連續不斷的呼叫執行函式——象打擊鼓點一樣。setTimeout,如同上面

所說,將執行一次,然後就停止。一個setTimeout函式可以再次呼叫自己來模擬事

件的再次發生:

setInterval(表示式,互動時間)
則不一樣,它從載入後,每隔指定的時間就執行一次表示式

用setInterval實現的自動變化顯示隨機數的效果:




))
   3,在類中使用setTimeout
    來分析一下:
   
   function xilou(){

        this.name="xilou";
        this.sex="男";
        this.num=0;
    }
    xilou.prototype.count=function(){
        this.num+=1;
        alert(this.num);
        if(this.num>10){return;}
        //下面用四種方法測試,一個一個輪流測試。
        setTimeout("this.count()",1000);//A:當下面的x.count()呼叫時會發生錯誤:物件不支援此屬性或方法。
        setTimeout("count()",1000);//B:錯誤顯示:缺少物件
        setTimeout(count,1000);//C:錯誤顯示:'count'未定義
        //下面是第四種
        var self=this;
        setTimeout(function(){self.count();},1000);//D:正確
       
    }
   
    var x=new xilou();
    x.count();
   
    錯誤分析:
   
A:中的this其實指是window物件,並不是指當前例項物件
   
B:和C:中的count()和count其實指的是單獨的一個名為count()的函式,但也可以是window.count(),因為window.count()可以省略為count()
   D:將變數self指向當前例項物件,這樣js解析引擎就不會混餚this指的是誰了。
   
    話說回來,雖然我們知道setTimeout("this.count()",1000)中的this指的是window物件,但還是不明白為什麼會是
    window物件
    那我們可以想象一下這個setTimeout是怎樣被定義的:
   
setTimeout是window的一個方法,全稱是這樣的:window.setTimeout()
    那應該是這樣被定義的:
    window.setTimeout=function(vCode, iMilliSeconds [, sLanguage]){
        //.....程式碼
        return timer//返回一個標記符
    }
    所以當向setTimeout()傳入this的時候,當然指的是它所屬的當前物件window了。

---------------------------------------------------------------------------------------------------------------------------------

關於prototype:

prototype(原型)
  同時,函式是一個物件,函式物件若直接宣告成員,不用被例項化即可呼叫。(有點模糊..)

  在JavaScript中,prototype物件是實現面向物件的一個重要機制。

  每個函式就是一個物件(Function),函式物件都有一個子物件 prototype物件,類是以函式的形式來定義的。prototype表示該函式的原型,也表示一個類的成員的集合。

  在通過new建立一個類的例項物件的時候,prototype物件的成員都成為例項化物件的成員。

  1、該物件被類所引用,只有函式物件才可引用;

  2、在new例項化後,其成員被例項化,例項物件方可呼叫。

例子1:給String類封裝一個“日期驗證”的新的方法:

  String.prototype.isDate = function(){    var regex = new RegExp("^[\d]([-|/])[\d]{1,2}([-|/])[\d]{1,2}$");
  console.log(this);
  return regex.exec(this);
  }
  var strValue = "12512412";
  alert(strValue.isDate());