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實現的自動變化顯示隨機數的效果:

<html>
<head>
<script>
function sett()
{
document.body.innerHTML=Math.random();
}
setInterval("sett();", 500);
</script>
</script>
</head>
<body>
</body>

))
    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());
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章