>  기사  >  웹 프론트엔드  >  js 타이머(한 번 실행, 반복 실행)_javascript 기술

js 타이머(한 번 실행, 반복 실행)_javascript 기술

WBOY
WBOY원래의
2016-05-16 16:56:291120검색

1. 한 번만 실행되는 타이머

코드 복사 코드는 다음과 같습니다.

< ;script>
//타이머가 비동기식으로 실행됩니다.
function hello(){
alert("hello")
}
//메서드 이름을 사용하여 메서드를 실행합니다.
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//문자열 실행 방법 사용
window.clearTimeout(t1) ;//타이머 제거



2, 반복 실행용 타이머

코드 복사 코드는 다음과 같습니다.

<script> <br>function hello(){ <br>alert("hello"); >} <br>//반복 메소드 실행 <br>var t1 = window.setInterval(hello,1000); <br>var t2 = window.setInterval("hello()",3000)// 타이머를 제거하는 방법<br>window.clearInterval(t1); <br></script>


참고:

페이지 둘 다 페이지에 있습니다. 로딩이 완료된 후에 실행되지만 실제로는 순서대로 실행되지 않습니다. 다음 방법을 참고하면 문제를 해결할 수 있습니다.
onload 메서드에 타이머를 추가할 수 있습니다. , 타이머를 설정하고 다시 실행하기 전에 일정 시간 동안 "지연"하는 것은 페이지 로딩 순서와 실행 방법을 구별하는 것으로 간주됩니다.


자바스크립트에는 타이머 전용 함수가 두 개 있습니다.

1. 카운트다운 타이머: timename=setTimeout("function();",delaytime);

2. 루프 타이머: timename=setInterval("function();",delaytime);


첫 번째 매개변수인 "function()"은 타이머가 실행될 때 실행되는 동작입니다. 하나의 함수일 수도 있고 여러 함수일 수도 있습니다. 예를 들어 두 개의 경고 창을 표시하려면 "function();"을

"alert('첫 번째 경고 창!'); Alert('두 번째 경고 창!');"; 두 번째 매개변수 "delaytime"은 밀리초 단위의 간격 시간입니다. 즉, "5000"을 채우면 5초를 의미합니다.

카운트다운 타이머는 지정된 시간이 지나면 이벤트를 트리거하는 반면, 루프 타이머는 간격이 도래하면 이벤트를 반복적으로 트리거합니다. 둘의 차이점은 전자는 한 번만 작동하고 후자는 지속적으로 작동한다는 것입니다.
예를 들어, 페이지를 열고 몇 초마다 자동으로 다른 페이지로 이동하려면 카운트다운 타이머 "setTimeout("function();",delaytime)"을 사용해야 합니다. 한 번에 한 단어씩 나타나도록 문장을 설정하려면
루프 타이머 "setInterval("function();",delaytime)"을 사용해야 합니다.

양식의 포커스를 얻기 위해 document.activeElement.id가 사용됩니다. document.activeElement.id와 양식 ID가 동일한지 확인하려면 if를 사용하세요.

예: if ("mid" == document.activeElement.id) {alert();}, "mid"는 양식에 해당하는 ID입니다.


타이머:

특정 시간 후에 실행될 프로그램을 지정하는 데 사용됩니다.

JS의 타이밍 실행, setTimeout과 setInterval의 차이점 및 취소 방법

setTimeout(Expression,DelayTime), DelayTime 이후에 표현식이 실행됩니다. setTimeout은 작업을 수행하기 전에 일정 시간 동안 지연하는 데 사용됩니다.

setTimeout("function",time)은 시간 초과 객체를 설정합니다


setInterval(expression, DelayTime), Expression은 DelayTime마다 실행됩니다.

setInterval("function", time)은 시간 초과 개체를 설정하는 데 자주 사용됩니다.

SetInterval은 자동으로 반복되며, setTimeout은 반복되지 않습니다.

clearTimeout(object)는 setTimeout 객체를 지웁니다

clearInterval(object)는 setInterval 객체를 지웁니다

두 가지 예만 들어보세요.
예제 1. 폼이 트리거되거나 로드되면 문자열을 그대로 출력


< head>

제목 없는 문서









예 2. 입력 상자에 포커스가 있을 때 입력 상자 정보를 정기적으로 확인하고, 포커스가 맞지 않을 때는 확인 작업을 수행하지 않습니다.

코드 복사 코드는 다음과 같습니다.




< title>제목 없는 문서












예제 3. 다음은 타이머가 만료된 후 경고 창이 팝업되는 가장 간단한 예입니다.

코드 복사 코드는 다음과 같습니다.



< ;script 언어="javascript">
function count() {
document.getElementByIdx_x_x('m').innerHTML="타이머가 시작되었습니다!";
setTimeout("alert(' 10초 후!')",10000)
}



< 입력 TYPE="button" value=" 타이밍 시작" onclick="count()">



예시 4: 카운트다운 시간 점프



코드 복사 코드는 다음과 같습니다.



내 JSP 'ds04.jsp' 시작 페이지< ;/ title><br> <span id="tiao">3</span><br> <a href="javascript:countDown"></a>초 후 자동으로 이동...<br> <meta http-equiv=refresh content=3;url= '/ds02.jsp'/><br> <!--스크립트 시작--><br> <script 언어="javascript" type= ""><br>function countDown(초){<br> tiao.innerText=secs;<br> if(--secs>0)<br> setTimeout("countDown(" 초 ")",1000 ); <br> }<br> countDown(3);<br> </script><br> <!--스크립트 끝--><br> </head><br><br> </div> <br>예 6:<br> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="16541" class="copybut" id="copybut16541" onclick="doCopy('code16541')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span></div> <div class="codebody" id="code16541"><head> 메타 http-equiv="refresh" content="2;url='b.html'"> <br></head> <br><br><br> </div>예 7: <p></p> <p></p> <div class="codetitle"><span>코드 복사<a style="CURSOR: pointer" data="36431" class="copybut" id="copybut36431" onclick="doCopy('code36431')"><u></u> 코드는 다음과 같습니다.</a></span></div><script 언어="javascript" 유형 ="text /javascript"><div class="codebody" id="code36431"> setTimeout("window.location.href='b.html'", 2000);<br> //다음 두 가지 모두 사용할 수 있습니다<br> //setTimeout( "javascript:location.href='b.html'", 2000);<br> //setTimeout("window.location='b.html'", 2000);<br></script><br> <br><br> </div>예 8: <p></p> <p></p> <div class="codetitle"><span>코드 복사<a style="CURSOR: pointer" data="3319" class="copybut" id="copybut3319" onclick="doCopy('code3319')"><u></u> 코드는 다음과 같습니다.</a><div class="codebody" id="code3319"> <br><span id="totalSecond">2</span><br><script 언어="javascript" type="text/javascript"><br> var second = document.getElementByIdx_x ('totalSecond').innerHTML;<br> if(isNaN(second)){<br>  //……불是数字적 처리 방법<br> }else{<br>  setInterval(function(){<br>   문서 .getElementByIdx_x('totalSecond').innerHTML = --second;<br>   if (초 <= 0) {<br>    window.location = 'b.html';<br>   }<br>  }, 1000) ;<br> } <br></script><br> </div></span></div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명:</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사:<a class="dBlack" title="텍스트 상자 내용 변경 event_javascript 기술을 판단하는 JS의 간단한 예" href="http://m.php.cn/ko/faq/13733.html">텍스트 상자 내용 변경 event_javascript 기술을 판단하는 JS의 간단한 예</a></span><span>다음 기사:<a class="dBlack" title="텍스트 상자 내용 변경 event_javascript 기술을 판단하는 JS의 간단한 예" href="http://m.php.cn/ko/faq/13735.html">텍스트 상자 내용 변경 event_javascript 기술을 판단하는 JS의 간단한 예</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/1609.html" title="Bootstrap 목록 그룹 구성 요소에 대한 심층 분석" class="aBlack">Bootstrap 목록 그룹 구성 요소에 대한 심층 분석</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1640.html" title="JavaScript 함수 커링에 대한 자세한 설명" class="aBlack">JavaScript 함수 커링에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1949.html" title="JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)" class="aBlack">JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/2248.html" title="Angularjs는 WeChat UI(weui)를 통합합니다." class="aBlack">Angularjs는 WeChat UI(weui)를 통합합니다.</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/2351.html" title="JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술" class="aBlack">JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!</p></div><div class="footermid"><a href="http://m.php.cn/ko/about/us.html">회사 소개</a><a href="http://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="http://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>