ホームページ > 記事 > ウェブフロントエンド > JavaScript_javascript スキルにおける SetInterval と setTimeout の使用法の詳細な説明
JavaScript_javascript スキルにおける SetInterval と setTimeout の使用法の詳細な説明
- WBOYオリジナル
- 2016-05-16 15:33:011374ブラウズ
setTimeout
説明
setTimeout(code,millisec)
setTimeout() メソッドは、指定されたミリ秒数の後に関数または計算式を呼び出すために使用されます。
注: 呼び出しプロセス中に、clearTimeout(id_of_settimeout) を使用して
を終了できます。
| 参数 | 描述 |
|---|---|
| code | 必需，要调用的函数后要执行的 JavaScript 代码串。 |
| millisec | 必需，在执行代码前需等待的毫秒数。 |
setTimeinterval
setInterval(code,millisec[,"lang"])
| 参数 | 描述 |
|---|---|
| code | 必需，要调用的函数或要执行的代码串。 |
| millisec | 必需，周期性执行或调用code之间的时间间隔，以毫秒计。 |
setInterval() メソッドは、指定された期間 (ミリ秒単位) に従って関数を呼び出したり、式を計算したりできます。
JS で遅延を設定します:
SetInterval の使用は、遅延関数 setTimeout の設定と非常に似ています。 setTimeout は、操作を実行する前に一定期間遅延させるために使用されます。
setTimeout("function",time) タイムアウト オブジェクトを設定します setInterval("function",time) タイムアウト オブジェクトを設定します
SetInterval は自動的に繰り返され、setTimeout は繰り返されません。
clearTimeout(object) は setTimeout オブジェクトをクリアしますclearInterval(object) は setInterval オブジェクトをクリアします
setInterval() メソッドは、指定された期間 (ミリ秒単位) に従って関数を呼び出したり、式を計算したりできます。
タイマーを使用して、JavaScript の遅延実行または繰り返し実行を実装します。window オブジェクトには、タイマーの効果を実現する 2 つのメソッド、window.setTimeout() と window.setInterval が用意されています。前者は指定された時間の後にコードを実行できますが、後者は指定された時間ごとにコードを 1 回実行できます。そのプロトタイプは次のとおりです: window.setTimeout(expression,milliseconds); window.setInterval(expression,milliseconds); このうち、expression は引用符で囲まれたコードの一部であることも、関数名であることもできます。時間に達すると、関数は自動的に呼び出されます。関数名を呼び出しハンドルとして使用する場合は、パラメーターを受け取ることはできません。文字列を使用する場合は、その関数に渡すパラメーターを記述することができます。 2 つのメソッドの 2 番目のパラメーターはミリ秒で、遅延または繰り返し実行のミリ秒数を表します。
以下に 2 つの方法を紹介します。
1． window.setTimeout メソッド このメソッドは、たとえば次のような関数の実行を遅らせることができます。
<script language="JavaScript" type="text/javascript">
<!--
function hello(){ alert("hello"); } window.setTimeout(hello,5000);
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
function hello(){
alert("hello");
}
var id=window.setTimeout(hello,5000);
document.onclick=function(){
window.clearTimeout(id);
}
//-->
</script>
2． window.setInterval メソッド このメソッドは、一定時間ごとに関数を呼び出す、非常に一般的なメソッドです。スケジュールされた実行をキャンセルする場合は、clearTimeout メソッドと同様に、window.clearInterval メソッドを呼び出すことができます。また、clearInterval メソッドは、setInterval メソッドによって返された値をパラメータとして受け取ります。例: //繰り返し実行される呼び出しを定義します。 var id=window.setInterval("somefunction",10000); // スケジュールされた実行をキャンセルします window.clearInterval(id);スケジュールされた実行。実際、setInterval メソッドは多くの場合に使用する必要があります。以下では、setInterval 関数の使用方法を紹介するストップウォッチを設計します。ストップウォッチには、時間を表示するための 2 つのボタンとテキスト ボックスが含まれます。開始ボタンをクリックすると、最小単位は 0.01 秒で計測が開始され、再度ボタンをクリックすると計測が停止し、テキスト ボックスに経過時間が表示されます。別のボタンを使用して、現在時刻をゼロにリセットします。実装コードは次のとおりです:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
</head>
<body>
<form action="somepage.asp">
<input type="text" value="0" name="txt1"/>
<input type="button" value="开始" name="btnStart"/>
<input type="button" value="重置" name="btnReset"/>
</form>
</body>
</html>
<script language="JavaScript" type="text/javascript">
<!--
//获取表单中的表单域
var txt=document.forms[0].elements["txt1"];
var btnStart=document.forms[0].elements["btnStart"];
var btnReset=document.forms[0].elements["btnReset"]
//定义定时器的id
var id;
//每10毫秒该值增加1
var seed=0;
btnStart.onclick=function(){
//根据按钮文本来判断当前操作
if(this.value=="开始"){
//使按钮文本变为停止
this.value="停止";
//使重置按钮不可用
btnReset.disabled=true;
//设置定时器，每0.01s跳一次
id=window.setInterval(tip,10); }
else{
//使按钮文本变为开始
this.value="开始";
//使重置按钮可用
btnReset.disabled=false;
//取消定时
window.clearInterval(id);
} }
//重置按钮
btnReset.onclick=function(){
seed=0;
}
//让秒表跳一格
function tip(){
seed++;
txt.value=seed/100;
}
//-->
</script>
//根据用户名显示欢迎信息
function hello(_name){
alert("hello,"+_name);
}
window.setTimeout(hello(userName),3000);
これにより、hello 関数が即座に実行され、戻り値が呼び出しハンドルとして setTimeout 関数に渡されますが、その結果はプログラムが必要とするものではありません。文字列形式を使用すると、目的の結果を得ることができます:
window.setTimeout("hello(userName)",3000);
ここでの文字列は JavaScript コードの一部であり、userName は変数を表します。ただし、この書き方は十分直感的ではないため、場合によっては関数名を使用する必要があります。パラメーターを使用して関数を呼び出すには、次のようなちょっとしたトリックがあります。
这里定义了一个函数_hello，用于接收一个参数，并返回一个不带参数的函数，在这个函数内部使用了外部函数的参数，从而对其调用，不需要使用参数。在window.setTimeout函数中，使用_hello(userName)来返回一个不带参数的函数句柄，从而实现了参数传递的功能。
window对象有两个主要的定时方法，分别是setTimeout 和 setInteval 他们的语法基本上相同，但是完成的功能取有区别。
setTimeout方法是定时程序，也就是在什么时间以后干什么。干完了就拉倒。
setInterval方法则是表示间隔一定时间反复执行某操作。
JS里设定延时：
使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间，再进行某项操作。
setTimeout("function",time) 设置一个超时对象
setInterval("function",time) 设置一个超时对象
SetInterval为自动重复，setTimeout不会重复。
clearTimeout(对象) 清除已设置的setTimeout对象
clearInterval(对象) 清除已设置的setInterval对象
如果用setTimeout实现setInerval的功能，就需要在执行的程序中再定时调用自己才行。如果要清除计数器需要根据使用的方法不同，调用不同的清除方法：
例如：
tttt=setTimeout('northsnow()',1000);
clearTimeout(tttt);
或者：
tttt=setInterval('northsnow()',1000);
clearInteval(tttt);
举一个例子：
<div id="liujincai">
</div>
<input type="button" name="start" value="start" onclick='startShow();'>
<input type="button" name="stop" value="stop" onclick="stop();">
<script language="javascript">
var intvalue=1;
var timer2=null;
function startShow() {
liujincai.innerHTML=liujincai.innerHTML + " " + (intvalue ++).toString();
timer2=window.setTimeout("startShow()",2000); }
function stop() {
window.clearTimeout(timer2);
}
</script>
或者：
<div id="liujincai">
</div>
<input type="button" name="start" value="start" onclick='timer2=window.setInterval("startShow()",2000);//startShow();'>
<input type="button" name="stop" value="stop" onclick="stop();">
<script language="javascript">
var intvalue=1;
var timer2=null;
function startShow() {
liujincai.innerHTML=liujincai.innerHTML + " " + (intvalue ++).toString();
}
function stop() {
window.clearInterval(timer2);
}
</script>
以上内容是小编给大家介绍的关于JavaScript中SetInterval与setTimeout的用法详解，希望对大家学习SetInterval与setTimeout的相关知识有所帮助。