分享內容(
坦白的說,之前我並沒有在 Javascript 類中使用 setTimeout/setInterval 的經驗,所以開始就很草率的認為這是無法實現的。但是經過深思熟慮以後發現是可以實現的。退一步說,隔五秒執行某段語句是非常容易實現的。比如不考慮別的因素,題目中的函數是可以這樣寫:
在運行以後,誰都會意識到 this 這個變數是無法找到的。但是這是為什麼呢,很快就可以意識到,其實 setTimeout/setInterval 是 window 物件的一個方法,所以也可以寫成 window.setTimeout/window.setInterval,那麼上述的 this.shout() 就非常可以容易理解為什麼不能執行了,因為它實際上調用的是 window.shout() 。
知道了原因以後解決起來就非常的容易了,只要將物件綁定到 window 物件下就可以(我對 Javascript 有趣的物件機制感到興奮)。那麼,上述的函數再做一個小的修改:
這樣就可以了。實際上
setTimeout('Obj.shout()', 5000);
等價於
window.setTimeout('window.Obj.shout()', 5000);
(中略...)
...還有另外的一個辦法就是通過 Closure(閉包) 來實現,代碼如下:
9人
var Obj = function(msg){
this.msg = msg;
this.shout = function(){
alert(this.msg);
}
this.waitAndShout = function(){
// 隔五秒鐘後執行上面的 shout 方法
}
}
var testObj = new Obj("Hello,World!");
testObj.shout();坦白的說,之前我並沒有在 Javascript 類中使用 setTimeout/setInterval 的經驗,所以開始就很草率的認為這是無法實現的。但是經過深思熟慮以後發現是可以實現的。退一步說,隔五秒執行某段語句是非常容易實現的。比如不考慮別的因素,題目中的函數是可以這樣寫:
this.waitAndShout = function(){
setTimeout('this.shout()', 5000);
}在運行以後,誰都會意識到 this 這個變數是無法找到的。但是這是為什麼呢,很快就可以意識到,其實 setTimeout/setInterval 是 window 物件的一個方法,所以也可以寫成 window.setTimeout/window.setInterval,那麼上述的 this.shout() 就非常可以容易理解為什麼不能執行了,因為它實際上調用的是 window.shout() 。
知道了原因以後解決起來就非常的容易了,只要將物件綁定到 window 物件下就可以(我對 Javascript 有趣的物件機制感到興奮)。那麼,上述的函數再做一個小的修改:
this.waitAndShout = function() {
window.Obj = this;
setTimeout('Obj.shout()', 5000);
}這樣就可以了。實際上
setTimeout('Obj.shout()', 5000);
等價於
window.setTimeout('window.Obj.shout()', 5000);
(中略...)
...還有另外的一個辦法就是通過 Closure(閉包) 來實現,代碼如下:
var Obj = function(msg){
this.msg = msg;
this.shout = function() {
alert(this.msg);
this.waitAndShout();
}
var _self = this;
this.waitAndShout = function() {
setTimeout(function(){_self.shout()}, 5000);
}
}
var testObj = new Obj("Hello,World!");
testObj.shout();參考資料:http://www.jb51.net/article/13474_2.htm
JavaScript函setTimeout的scope
其實問題在於這一段的寫法不正確
setTimeout 是屬於 windows 層級的 function
你下了 setTimeout 這個指令,Browser 就會開始幫您計時,等時間到了就會 eval 您所指定的函式,this.shout 在 Timer 執行的時間點會被當作是宣告在外的 function,所以當然會找不到,因為 shout 是宣告在 Obj 底下的
所以在
中,window.Obj 這一個宣告是非必要的
後面那一段 Closure 的作法,是將
包裝在 function() 這個物件當中,所以 setTimeout 執行時,是執行這整個物件
的內容
這是比較新近的寫法,可是也比較不好懂,但搞懂後會覺得這種方式彈性比較大
也比較直覺
this.waitAndShout = function(){
setTimeout('this.shout()', 5000);
} setTimeout 是屬於 windows 層級的 function
你下了 setTimeout 這個指令,Browser 就會開始幫您計時,等時間到了就會 eval 您所指定的函式,this.shout 在 Timer 執行的時間點會被當作是宣告在外的 function,所以當然會找不到,因為 shout 是宣告在 Obj 底下的
所以在
this.waitAndShout = function() {
window.Obj = this; // <== 此非必要
setTimeout('Obj.shout()', 5000);
}
中,window.Obj 這一個宣告是非必要的
後面那一段 Closure 的作法,是將
this.shout = function() {
alert(this.msg);
this.waitAndShout();
}
包裝在 function() 這個物件當中,所以 setTimeout 執行時,是執行這整個物件
的內容
setTimeout(function(){_self.shout()}, 5000); 這是比較新近的寫法,可是也比較不好懂,但搞懂後會覺得這種方式彈性比較大
也比較直覺
抱歉,回應太長,所以我把他放在我的blog上:
http://www.ithome.com.tw/plog/index.php?op=ViewArticle&articleId=19165&blogId=257
setTimeout的問題還蠻常見的 :),希望有理解你的問題。
http://www.ithome.com.tw/plog/index.php?op=ViewArticle&articleId=19165&blogId=257
setTimeout的問題還蠻常見的 :),希望有理解你的問題。
回應 :
請填寫您的回應,長度限為1,000個字,回應不計點數,也不限使用次數
▼ ADVERTISEMENT ▼
-
‧
-
‧
-
‧
相關問答
- 看jQuery作者John Resig談進階JavaScript
- 有趣的V8 Javascript Engine
- JavaScript中的closure好難懂,它和匿名函式有什麼不同?
- 什麼是JavaScript Hijacking?
- Mozilla釋出TraceMonkey加速JavaScript
- 寫物件導向風格的JavaScript
- Scope Creep & Gold Plating
- Scope Creep & Gold Plating
- 下載電子書Adobe AIR for JavaScript Developers Pocketguide
- JavaScript如何在不同網站之間傳遞資料
- Javascript編碼小工具
- 把瀏覽器的JavaScript和ActiveX的執行全部停用,是否就能真正杜絕網頁威脅?
- 《JavaScript: 優良部份》出版了......
- 用JavaScript處理RSS的好幫手-Google AJAX Feed API
- 我需要找人修改技术指标公式,有精通JavaScript的编程员吗?
- 利用Firebug的console功能作JavaScript偵錯
- 範疇管理:專案範疇說明書(Project Scope Statement, PSS)
- MSDN台中研討會
- Google提供幾個Ajax Libraries的Hosting服務









