JavaScript でのタイマーの使用例_javascript のヒント

function foo()
{
}
setInterval( "foo()", 1000 );

// コンストラクター
function MyObj
{
function foo()
{
alert( this.data );

this.timer = foo;

setInterval( "this.timer()") , 1000 );
}

function Another()
{
// オブジェクト作成時にタイマーを作成します
var obj = new MyObj();


しかし、思ったようにはいきません。その理由は、setInterval() 関数が変数 this を認識しないためです。回避策としては次のような方法が考えられます。

setInterval( "obj.timer()", 1000 );
}


明らかに、これは正しく動作します。完璧主義者 そうしないと満足できないでしょう。幸いなことに、形式を少し変更するだけで、このアクションをコンストラクターに組み込むことができます。

function foo()
{
alert( this.data );
}

this.timer =
this.data = "こんにちは" ;

var self = this;
setInterval( function() { self.timer(); }, 1000 );

function Another()
{
var obj = new MyObj();

}


クロージャを使用するだけです。その理由については、読者の皆様にご自身で考えていただきたいと思います。

最後に、さまざまなテストケースの例を示します。

/*
* 3 つあります
*
* 1. タイマーは実行できますが、結果は正常です
* 2. タイマーは実行できますが、結果は間違っています
* 3. タイマーは実行できません
*
* /

function Obj()
{
function foo()
{
alert(this.timer );
}

this.timer = foo;

//
var me = this;
var f = function() { me.timer() }; ); } ;

// 第 1 クラス
//setInterval( f, 1000 ); // 第 3 クラス
//setInterval( f2, 1000 ); 2 番目のクラス
//setInterval( me.timer, 1000);
//setInterval( this.timer, 1000);// setInterval( foo, 1000); 🎜>/ /setInterval( "this.timer()", 1000 );
//setInterval( "me.timer()", 1000 );
//setInterval( "foo()", 1000 ) ;
}

var o = null;

関数 OnClick()
{
o = new Obj(); //setInterval ( "o.timer()", 1000 );
setInterval( function() { o.timer(); }, 1000 );
// 2 番目のクラス
//setInterval( o .timer, 1000 );