ホームページ > 記事 > ウェブフロントエンド > JavaScriptでのSetIntervalとsetTimeoutの使い方を詳しく解説

JavaScriptでのSetIntervalとsetTimeoutの使い方を詳しく解説

高洛峰オリジナル: 2017-02-08 15:59:32846ブラウズ

setTimeout

説明

setTimeout(code,millisec)

setTimeout() メソッドは、指定されたミリ秒数の後に関数または計算式を呼び出すために使用されます。

注: 呼び出しプロセス中に、clearTimeout(id_of_settimeout) を使用して、

パラメータ	Description
code	を終了できます。の後に実行される呼び出される関数 string 。
millisec	必須、コードを実行する前に待機するミリ秒数。

setTimeinterval

setInterval(code,millisec[,"lang"])

パラメータ	説明
コード	必須、呼び出される関数、または実行するコード文字列。
millisec	必須。定期的な実行またはコードの呼び出し間の時間間隔 (ミリ秒単位)。

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>

このコードにより、ページが開かれてから 5 秒後にダイアログボックス「hello」が表示されます。最後の文は次のように書くこともできます: window.setTimeout("hello()",5000); このプロパティは window.setInterval メソッドにも存在します。遅延期間に達する前に遅延実行をキャンセルする場合は、タイマーを表す ID を受け取る window.clearTimeout(timeoutId) メソッドを使用できます。この ID は setTimeout メソッドによって返されます。例:

<script language="JavaScript" type="text/javascript">
<!--
function hello(){   
alert("hello");
}
var id=window.setTimeout(hello,5000);
document.onclick=function(){   
window.clearTimeout(id);
 }
//-->
</script>

このように、表示をキャンセルしたい場合は、ページの任意の部分をクリックするだけで window.clearTimeout メソッドが実行されます。タイムアウト操作がキャンセルされます。

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>

window.setTimeout または window.setInterval のいずれであっても、タイマー呼び出しにパラメータを渡す場合、関数名を呼び出しハンドルとして使用する場合はパラメータを受け取ることができません。これにはパラメータを取得する必要があります。これを解決する方法を見つける必要があります。たとえば、関数 hello(_name) は、ユーザー名のウェルカムメッセージを表示するために使用されます: var userName="jack";

//根据用户名显示欢迎信息
function hello(_name){   
 alert("hello,"+_name);
 }

このとき、次のステートメントを使用して、 hello 関数を 3 秒間実行することは不可能です。OK:

window.setTimeout(hello(userName),3000);

これにより、hello 関数がすぐに実行され、戻り値が呼び出しハンドルとしてsetTimeout 関数の結果はプログラムが必要とするものではありません。望ましい結果は、文字列形式を使用することで実現できます:

window.setTimeout("hello(userName)",3000);

ここでの文字列は JavaScript コードの一部であり、userName は変数を表します。しかし、この書き方は直感的ではなく、場合によっては関数名を使用する必要があります。パラメーターを使用して関数を呼び出すためのちょっとしたトリックを次に示します。

<script language="JavaScript" type="text/javascript"> <!-- var userName="jack";
//根据用户名显示欢迎信息
function hello(_name){    
alert("hello,"+_name);
}
//创建一个函数，用于返回一个无参数函数
function _hello(_name){    
return function(){       
hello(_name);    } }
window.setTimeout(_hello(userName),3000);
 //-->
</script>

ここでは関数 _hello が定義されており、これが使用されます。パラメータを受け取り、パラメータなしで関数を返します。外部関数のパラメータはこの関数内で使用されるため、パラメータを使用せずに呼び出すことができます。 window.setTimeout 関数では、_hello(userName) を使用してパラメータなしで関数ハンドルを返すことで、パラメータを渡す関数を実現します。

window オブジェクトには、setTimeout と setInteval という 2 つの主要なタイミングメソッドがあります。それらの構文は基本的に同じですが、完成した関数が異なります。

setTimeoutメソッドは、一定時間後に何をするかというタイミングプログラムです。完了したら下に引き下げます。

　　setInterval方法则是表示间隔一定时间反复执行某操作。

　　JS里设定延时：

使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间，再进行某项操作。

setTimeout("function",time) 设置一个超时对象

setInterval("function",time) 设置一个超时对象

SetInterval为自动重复，setTimeout不会重复。

clearTimeout(对象) 清除已设置的setTimeout对象

clearInterval(对象) 清除已设置的setInterval对象

如果用setTimeout实现setInerval的功能，就需要在执行的程序中再定时调用自己才行。如果要清除计数器需要根据使用的方法不同，调用不同的清除方法：

例如：

tttt=setTimeout(&#39;northsnow()&#39;,1000);
clearTimeout(tttt);

或者：

tttt=setInterval(&#39;northsnow()&#39;,1000);
clearInteval(tttt);

举一个例子：

<p id="liujincai">
</p>
<input type="button" name="start" value="start" onclick=&#39;startShow();&#39;>
<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>

或者：

<p id="liujincai">
</p>
<input type="button" name="start" value="start" onclick=&#39;timer2=window.setInterval("startShow()",2000);//startShow();&#39;>
<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的相关知识有所帮助。

更多JavaScript中SetInterval与setTimeout的用法详解相关文章请关注PHP中文网！

声明：

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

前の記事：Node.js での setTimeout と setInterval の使用法をすぐにマスターする次の記事：Node.js での setTimeout と setInterval の使用法をすぐにマスターする

続きを見る

JavaScriptでのSetIntervalとsetTimeoutの使い方を詳しく解説

関連記事