ホームページ  >  記事  >  ウェブフロントエンド  >  setInterval()とsetTimeout()の使用例と違い_基礎知識

setInterval()とsetTimeout()の使用例と違い_基礎知識

WBOY
WBOYオリジナル
2016-05-16 17:14:421100ブラウズ
1. setInterval() use_learning
コードをコピーします コードは次のとおりです:

// メソッドを 1 秒ごとに自動的に実行します
var c=0;
function showLogin()
{
alert(c );
}
//setInterval メソッド または文字列、ミリ秒、パラメータ配列 (メソッド))
setInterval("showLogin()", "1000");

2.setTimeout

jsクラスでのsetTimeout()の使い方
setTimeout (式、遅延時間)
setTimeout (式、インタラクション時間)
遅延時間/インタラクション時間はミリ秒単位です setTimeout(1000ms=1s)を実行すると、式はロード後に指定された時間だけ遅延してから 1 回実行され、setTimeout を実行する場合は、ロード後に指定された時間ごとに式が 1 回実行されます。
コードを実行します。 :
var i=0;
setTimeout("i =1;alert(i)",1000);
関数を実行します:
var i=0; ){i =1;alert(i);},1000);

//上記の 2 つのメソッドの違いに注意してください。
ここに別の実行関数があります:


var i =0;
関数 test(){
alert(i);
setTimeout("test()",1000); 🎜>
次のようにすることもできます:
setTimeout(test,1000);
概要:
setTimeout のプロトタイプは次のようになります:
iTimerID = window.setTimeout(vCode, iMilliSeconds) [, sLanguage])

setTimeout には 2 つの形式があります
setTimeout(code,interval)
setTimeout(func,interval,args)
code は文字列です
func は関数です.
「関数」の意味はステートメントではなく式であることに注意してください。
たとえば、関数を定期的に実行する場合は、
function a(){
//...
}

setTimeout("a()",1000)
または
setTimeout(a,1000)
として記述できます。ここで、2 番目の形式では次のようになります。 a、a() と書かないでください。覚えておいてください!!!
ここに何を書いても、それが関数であれば、それは特定の関数を指す変数でなければなりません。 、その場合、戻り値は function でなければなりません
2、setTimeout を使用して setInterval の関数を実装します (一定期間ごとに関数を自動的に実行します)
アイデアは非常に単純です。つまり、関数の中で関数を呼び出すということです。それ自体を継続的に実行するには、再帰に少し似ています。




コードをコピー

コードは次のとおりです。 var i=0; 関数 xilou(){ i =1; if( i>10){alert(i);return;}
setTimeout("xilou()",1000) );
//これも使用できます
//setTimeout(xilou,1000);


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;}
//以下の 4 つのメソッドを 1 つずつ順番にテストします。 。
setTimeout("this.count()",1000);//A: 次の x.count() が呼び出されるときにエラーが発生します: オブジェクトはこのプロパティまたはメソッドをサポートしていません。
setTimeout("count()",1000);//B: エラー表示: オブジェクトがありません
setTimeout(count,1000);//C: エラー表示: 'count' が定義されていません
/ / 以下は 4 番目の型です
var self=this;
setTimeout(function(){self.count();},1000);//D: 正しい

}

var x=new xilou();
x.count();
エラー分析:
A: の This は、実際には現在のインスタンス オブジェクトではなく、ウィンドウ オブジェクトを参照します
B: と C: の count() と count は、実際には It を参照しますこれは count() という名前の別の関数ですが、window.count() を count() として省略できるため、window.count() にすることもできます。
D: 変数 self が現在のインスタンス オブジェクトを指すようにします。 js 解析 エンジンは、これが誰を指すのか混乱することはありません。

とはいえ、setTimeout("this.count()",1000) の this が wi​​ndow オブジェクトを参照していることはわかっていますが、なぜそれが
window オブジェクトなのかはまだ理解できません^ _^ (少しめまいがします...)
次に、この setTimeout がどのように定義されているかを想像できます:
setTimeout は window のメソッドで、完全な名前は次のようになります: window.setTimeout()
これは次のとおりです。次のように定義します:
window.setTimeout=function(vCode, iMilliSeconds [, sLanguage]){
//....Code
return timer//Return a marker
}
つまり、これが setTimeout() に渡されると、当然、それが属する現在のオブジェクト ウィンドウが参照されます。

簡単な例:
コードをコピー コードは次のとおりです:





ここをクリックしてください!



function clickButton(){
document.getElementById; click").click();
i ;

}
setInterval("clickButton()","1000");
//setTimeout("clickButton()",1000 );
//setTimeout(clickButton,1000);
function change(){
if(i%2==1)
document.getElementById('id1').style.color= 'red';
else
document.getElementById('id1').style.color='black';



声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。