JS_javascript 스킬에서 setTimeout() 사용법을 설명하는 예-JS 튜토리얼-php.cn

JS_javascript 스킬에서 setTimeout() 사용법을 설명하는 예

WBOY

풀어 주다： 2016-05-16 15:17:30

원래의

1886명이 탐색했습니다.

이 글에서는 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(필수): (원래 의미는 code) 호출할 함수 다음에 실행될 JavaScript 코드 문자열입니다.
millisec(필수): 코드를 실행하기 전에 대기할 시간(밀리초)입니다.
팁:
setTimeout()은 코드를 한 번만 실행합니다. 여러 번 호출하려면 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）

로그인 후 복사

타이머가 코드를 함수 객체로 변환하기 위해 열심히 노력하기 때문에 둘 다 예상된 목적을 달성할 수 없습니다. 첫 번째 오류의 경우 타이머는 즉시 코드를 실행하고 함수 객체를 반환하기를 희망하지만 결과는 그렇지 않습니다. 두 번째 오류 예에서는 함수 개체가 성공적으로 캡슐화되었지만 타이머가 msg의 표시 도메인 외부에서 코드를 실행하므로 메시지가 올바르게 전달될 수 없습니다.
권장되는 해결책은 익명 함수 콜백을 사용하는 것입니다

var msg='1shaspassed!';
setTimeout(function(){
alert(msg);
},1000);

로그인 후 복사

첫 번째 매개변수는 필수 명령문을 호출하는 함수 개체를 전달하여 매개변수가 있는 코드 문제를 해결합니다.

이상 내용이 이 글의 전체 내용입니다. 자바스크립트 프로그래밍을 배우시는 모든 분들께 도움이 되었으면 좋겠습니다.