在JavaScript中使用timer示例
更新時間：2014年05月08日 09:18:27 作者：
這篇文章主要介紹了在JavaScript中如何使用timer，并給出各種測試case的例子,需要的朋友可以參考下
復(fù)制代碼 代碼如下:
function foo()
{
}
setInterval( "foo()", 1000 );
如果使用OO的技術(shù)，可以這樣，
復(fù)制代碼 代碼如下:
// constructor
function MyObj
{
function foo()
{
alert( this.data );
}
this.timer = foo;
this.data = "Hello";
setInterval( "this.timer()", 1000 );
}
function Another()
{
// create timer when create object
var obj = new MyObj();
}
但是，它并不能像你想像的那樣工作。原因在于setInterval()這個函數(shù)并不能識別this這個變量。一個workaround 的方法可以這樣。
復(fù)制代碼 代碼如下:
function Another()
{
var obj = nw MyObj();
setInterval( “obj.timer()”, 1000 );
}
顯然，它可以正確工作，但如果你是一個完美主義者，你就不會對它滿意。幸運(yùn)的是，可以將這個動作放到構(gòu)造函數(shù)中去，形式上有點變化。
復(fù)制代碼 代碼如下:
// constructor
function MyObj
{
function foo()
{
alert( this.data );
}
this.timer = foo;
this.data = "Hello";
var self = this;
setInterval( function() { self.timer(); }, 1000 );
}
function Another()
{
var obj = new MyObj();
}
OK， 通過使用一個閉包，就可以了。至于其中的原因，我想給讀者自己去思考。
最后，給一個各種測試case的例子。
復(fù)制代碼 代碼如下:
<html>
<head>
<title>
Hello Timer
</title>
<script language = "JScript">
/*
* There are 3 classes.
*
* 1. timer can run and result is ok
* 2. timer can run and result is wrong
* 3. timer can not run
*
*/
function Obj()
{
function foo()
{
alert( this.timer );
}
this.timer = foo;
//
var me = this;
var f = function() { me.timer(); };
var f2 = function() { this.timer(); };
// 1st class
//setInterval( f, 1000 );
// 3rd class
//setInterval( f2, 1000 );
// 2nd class
//setInterval( me.timer, 1000 );
//setInterval( this.timer, 1000 );
//setInterval( foo, 1000 );
// 3rd class
//setInterval( "this.timer()", 1000 );
//setInterval( "me.timer()", 1000 );
//setInterval( "foo()", 1000 );
}
var o = null;
function OnClick()
{
o = new Obj();
// 1st class
//setInterval( "o.timer()", 1000 );
setInterval( function() { o.timer(); }, 1000 );
// 2nd class
//setInterval( o.timer, 1000 );
}
</script>
</head>
<body>
<input type = "button" onclick = "OnClick()" value = "Click me"></input>
</body>
</html>
相關(guān)文章
滑塊驗證碼是在網(wǎng)站、APP等應(yīng)用中常見的一種驗證方式，通過按照一定規(guī)則滑動滑塊到指定位置完成驗證，才可以進(jìn)行下一步操作，本文給大家分享基于JavaScript實現(xiàn)拼圖式滑塊驗證功能，感興趣的朋友一起看看吧2022-06-06
JavaScript暫時性死區(qū)以及函數(shù)作用域
這篇文章主要為大家介紹了JavaScript暫時性死區(qū)以及函數(shù)作用域示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了js添加類名的兩種方法,一種是通過className來添加、刪除類名,另一種是通過classList來添加、刪除類名,感興趣的朋友跟隨小編一起看看吧2023-11-11
滑輪滾動頁面的事件在網(wǎng)頁特效中進(jìn)場遇到，下面通過示例為大家介紹下原生JS綁定滑輪滾動事件并兼容瀏覽器2014-06-06
這篇文章主要介紹了JavaScript 鏈表定義與使用方法,結(jié)合實例形式分析了JavaScript 鏈表的基本功能、定義與使用方法,需要的朋友可以參考下2020-04-04
在javascript運(yùn)動系列中，詳細(xì)介紹了各種運(yùn)動，其中就包括碰壁運(yùn)動。但是，如果用canvas去實現(xiàn)，卻是另一種思路。本文將詳細(xì)介紹canvas動態(tài)小球重疊效果。下面跟著小編一起來看下吧2017-02-02
JavaScript Date對象功能與用法學(xué)習(xí)記錄
這篇文章主要介紹了JavaScript Date對象功能與用法,結(jié)合實例形式總結(jié)分析了JavaScript Date對象基本功能、用法及操作注意事項,需要的朋友可以參考下2020-04-04
JavaScript實現(xiàn)將文本框的值插入指定位置的方法
這篇文章主要介紹了JavaScript實現(xiàn)將文本框的值插入指定位置的方法,涉及javascript節(jié)點添加操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
解決layui數(shù)據(jù)表格table的橫向滾動條顯示問題
今天小編就為大家分享一篇解決layui數(shù)據(jù)表格table的橫向滾動條顯示問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)前端分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08