JavaScriptのタイマーは２種類用意されています。１つは指定時間後に処理を行うsetTimeout()、もう１つが定期的に処理を行うsetInterval()です。どちらのタイマー関数も最初が処理内容、次が時間の指定になります。時間はミリ秒なので1秒=1000となります。
setTimeout()はタイマーを設定し指定時間後に処理が実行されるため、繰り返し処理を続けるには以下のように何度も処理を行わせるように書く必要があります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>setTimeout, clearTimeout</title>
<script type="text/javascript"><!--
function changeBGColor()
{
R = Math.floor(Math.random() * 255);
G = Math.floor(Math.random() * 255);
B = Math.floor(Math.random() * 255);
document.getElementById("result").style.backgroundColor = "rgb("+R+","+G+","+B+")";
timerID = setTimeout("changeBGColor()",3*1000);
}
function setTimer()
{
timerID = setTimeout("changeBGColor()",100);
}
function clearTimer()
{
clearTimeout(timerID);
}
// --></script>
</head>
<body>
<h1>setTimeout, clearTimeout</h1>
<form method="get" name="ajaxForm" onsubmit="return false;">
<input type="button" value="タイマー設定" onClick="setTimer()">
<input type="button" value="タイマー解除" onClick="clearTimer()">
</form>
<div id="result">ボタンをクリックすると以後3秒ごとに背景色が表示/更新されます</div>
</body>
</html>
setTimeout()を実行するとタイマーIDが戻り値として返されます。setTimeout()で設定したタイマーを解除するには、このタイマーIDをclearTimeout()の引数（パラメータ）として指定します。
指定時間後に処理を行うsetTimeout()と異なりsetInterval()は一度呼び出す間隔と処理を指定するだけです。定期的に処理を行わせるのであればsetInterval()の方が簡単です。setInterval()もsetTimeout()同様にタイマーIDを返します。setInterval()のタイマーを解除するにはclearInterval()を使用します。タイマーIDはclearInterval()の引数（パラメータ）として渡します（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>setTimeout, clearTimeout</title>
<script type="text/javascript"><!--
function changeBGColor()
{
R = Math.floor(Math.random() * 255);
G = Math.floor(Math.random() * 255);
B = Math.floor(Math.random() * 255);
document.getElementById("result").style.backgroundColor = "rgb("+R+","+G+","+B+")";
}
function setTimer()
{
changeBGColor();
timerID = setInterval("changeBGColor()",3*1000);
}
function clearTimer()
{
clearInterval(timerID);
}
// --></script>
</head>
<body>
<h1>setTimeout, clearTimeout</h1>
<form method="get" name="ajaxForm" onsubmit="return false;">
<input type="button" value="タイマー設定" onClick="setTimer()">
<input type="button" value="タイマー解除" onClick="clearTimer()">
</form>
<div id="result">ボタンをクリックすると以後3秒ごとに背景色が表示/更新されます</div>
</body>
</html>
Ajaxとタイマーを組み合わせると定期的にニュース情報を取得しページを更新することもできます。以下のサンプルはボタンを押すと1分ごとにYahoo! JAPANのニュースを表示するものです。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Get Yahoo! NEWS</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function getYNews()
{
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","curl.rb?"+(new Date()).getTime(),true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
$("result").innerHTML = httpObj.responseText;
}
}
function setTimer()
{
timerID = setInterval("getYNews()",60 * 1000); // 60×1000ミリ秒 = 1分
getYNews();
}
function clearTimer()
{
clearInterval(timerID);
}
// --></script>
</head>
<body>
<h1>Get Yahoo! NEWS</h1>
<form method="get" name="ajaxForm" onsubmit="return false;">
<input type="button" value="Yahoo NEWS! 取得" onClick="setTimer()">
<input type="button" value="Yahoo NEWS! 更新解除" onClick="clearTimer()">
</form>
<div id="result">ボタンをクリックすると以後１分ごとにYahoo News!が表示/更新されます</div>
</body>
</html>
検索エンジンとの組み合わせに関しては次章で説明しますので、ここでは単にサンプルとだけしておきます。
次項ではマウスの座標の取得方法に関して説明します。
[
第五章 13:マウスの座標を取得するへ]
[
目次へ]
(2006.1.17)