ホームページ > 記事 > ウェブフロントエンド > JS_javascript スキルでの setTimeout() の使用法を説明する例
JS_javascript スキルでの setTimeout() の使用法を説明する例
- WBOYオリジナル
- 2016-05-16 15:17:301879ブラウズ
この記事では、JS での setTimeout() の使用法を例を示して説明し、参考として皆さんに共有します。具体的な内容は次のとおりです。
レンダリング:
特定のコード:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
var timer; //全局变量
var i=0; //变量初始化，全局变量
//定义函数：开始计时
function start()
{
//获取id=result的对象
var obj = document.getElementById("result");
var str = "该程序已经运行了"+i+"秒！";
i++; //展开 i=i+1
//将变量str的内容写入到id=result中去
obj.value = str; //给表单元素加内容，一般用value属性
//除表单外的其它标记用JS写内容，使用innerHTML
//设置延时器
timer = window.setTimeout("start()",10);
}
//定义函数：停止计时
function stop()
{
window.clearTimeout(timer);
}
</script>
</head>
<body>
<input type="button" id="result" value="该程序已经运行了0秒！" /><br />
<input type="button" onclick="start()" value="开始" />
<input type="button" onclick="stop()" value="停止" />
</body>
</html>
具体的な使用法について話しましょう:
1. パラメータ
code (必須): (本来の意味はコード) 呼び出される関数の後に実行される JavaScript コード文字列。
millisec (必須): コードを実行する前に待機するミリ秒数。
ヒント:
setTimeout() はコードを 1 回だけ実行します。複数回呼び出す場合は、setInterval() を使用するか、コード自体で setTimeout() を再度呼び出すようにします。
2. 例
<html>
<head>
<scripttype="text/javascript">
functiontimedMsg()
{
vart=
setTimeout("
alert('5seconds!')",5000)
}
</script>
</head>
<body>
<form>
<inputtype="button"
value="Displaytimedalertbox!"onClick="timedMsg()">
</form>
<p>Clickonthebuttonabove.Analertboxwillbedisplayedafter5seconds.</p>
</body>
</html>
3. 例 (2)
functionclockon(bgclock){
varnow=newDate();
varyear=now.getFullYear();
varmonth=now.getMonth();
vardate=now.getDate();
varday=now.getDay();
varhour=now.getHours();
varminu=now.getMinutes();
varsec=now.getSeconds();
varweek;
month=month+1;
if(month<10)month="0"+month;
if(date<10)date="0"+date;
if(hour<10)hour="0"+hour;
if(minu<10)minu="0"+minu;
if(sec<10)sec="0"+sec;
/*vararr_week=newArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
week=arr_week[day];
*/
switch(day){
case1:week="星期一";break;
case2:week="星期二";break;
case3:week="星期三";break;
case4:week="星期四";break;
case5:week="星期五";break;
case6:week="星期六";break;
default:week="星期日";break;
}
vartime="";
time=year+"年"+month+"月"+date+"日"+week+""+hour+":"+minu+":"+sec;
if(document.all){
bgclock.innerHTML="系统公告：["+time+"]"
}
vartimer=
setTimeout("clockon(bgclock)",200);
}
4. 実行
setTimeout(code, millisec) のコードに仮パラメータ
が含まれている状況によく遭遇します。
例: 1 秒後にユーザーにプロンプトを表示する必要がある情報は、変数 msg、
に保存されます。
var msg='1shaspassed!';
このとき、直接実行されるかどうか
setTimeout( alert(msg),1000);//alert(msg)会被立即执行
または
setTimeout(“alert(msg)”,1000);//系统报错msgisnotdefined（chrome）
どちらも期待された目的を達成できません。最初のエラーの場合、タイマーはコードを関数オブジェクトに変換しようと懸命に働き、すぐにコードを実行して関数オブジェクトを返そうとしますが、結果は返されません。 2 番目のエラー例では、関数オブジェクトは正常にカプセル化されていますが、タイマーが msg の可視ドメイン外でコードを実行するため、msg を正しく配信できません
推奨される解決策は、匿名関数コールバックを使用することです
var msg='1shaspassed!';
setTimeout(function(){
alert(msg);
},1000);
最初のパラメータは、必要なステートメントを呼び出す関数オブジェクトを渡すため、パラメータを含むコードの問題が解決されます。
以上がこの記事の全内容です。JavaScript プログラミングを学習する皆さんのお役に立てれば幸いです。