ホームページ >ウェブフロントエンド >jsチュートリアル >jsタイマーの使い方(例で解説)_javascriptスキル

jsタイマーの使い方(例で解説)_javascriptスキル

WBOY
WBOYオリジナル
2016-05-16 17:05:16972ブラウズ

JavaScript には、タイマー専用の関数が 2 つあります。つまり、

1. カウントダウンタイマー: timename=setTimeout("function();",laytime);
2. ループタイマー: timename=setInterval("function();",laytime);

最初のパラメータ「function()」は、タイマーがトリガーされたときに実行されるアクションです。1 つの関数または複数の関数を「;」で区切ることができます。たとえば、2 つの警告ウィンドウをポップアップ表示したい場合は、「function();」を
「alert('最初の警告ウィンドウ!');alert('2 番目の警告ウィンドウ!');」に置き換えることができます。 2 番目のパラメータ「laytime」はミリ秒単位の間隔時間です。つまり、「5000」と入力すると 5 秒を意味します。
カウントダウン タイマーは指定された時間に達した後にイベントをトリガーしますが、ループ タイマーは間隔が来ると繰り返しイベントをトリガーします。これら 2 つの違いは、前者は 1 回だけ動作するのに対し、後者は継続的に動作することです。
たとえば、ページを開いた後、数秒ごとに別のページに自動的にジャンプしたい場合は、カウントダウン タイマー "setTimeout("function();",laytime)" を使用する必要があります。一度に 1 単語ずつ表示されるように文を設定する場合、
ではループ タイマー "setInterval("function();",laytime)" を使用する必要があります。

フォームのフォーカスを取得するには、document.activeElement.id が使用されます。 if を使用して、document.activeElement.id とフォームの ID が同じかどうかを判断します。
例: if ("mid" == document.activeElement.id) {alert();}、「mid」はフォームに対応する ID です。

タイマー:
は、特定の時間後に実行されるプログラムを指定するために使用されます。

JSでの実行タイミング、setTimeoutとsetIntervalの違い、キャンセル方法

setTimeout(Expression,DelayTime)、DelayTime の後に、setTimeout を使用して、操作を実行する前に一定期間遅延させます。
setTimeout("function",time) はタイムアウト オブジェクトを設定します

setInterval(expression, lateTime)、Expression は DelayTime ごとに実行されます。
setInterval("function", time) はタイムアウト オブジェクトを設定します。

SetInterval は自動的に繰り返され、setTimeout は繰り返されません。

clearTimeout(object) は setTimeout オブジェクトをクリアします
clearInterval(object) は setInterval オブジェクトをクリアします

例を 2 つだけ挙げてみましょう。
例 1. フォームがトリガーまたはロードされると、文字列をそのまま出力します

コードをコピー コードは次のとおりです。


< head>

無題ドキュメント








例2. 入力ボックスにフォーカスがある場合は定期的に入力ボックスの情報を確認し、フォーカスが無い場合は確認動作を行わない。

コードをコピー コードは次のとおりです:




var Second=5000; //間隔時間 5 秒
var c =0;
functionscroll() {
c ;
if ("b" == document.activeElement.id) {
var str="スケジュールされたチェックセクション " c " Times
";
if(document.getElementByIdx_x_x('b').value!=""){
str ="入力ボックスの現在の内容は現在のコンテンツは
" document.getElementByIdx_x_x('b').value "";
}
document.getElementByIdx_x_x('word').innerHTML = str ;
}
}












例 3. 以下は最も単純な例です。タイマーが期限切れになった後に警告ウィンドウが表示されます。

コードをコピー コードは次のとおりです:




function count() {
document.getElementByIdx_x_x('m').innerHTML="タイマーが開始しました!";
setTimeout("alert(' 10 秒まで! < input TYPE="button" value=" タイミング開始" onclick="count()">





例 4: カウントダウン タイム ジャンプ


コードをコピー

コードは次のとおりです: My JSP 'ds04.jsp' 開始ページ< ;/ title></div> <span id="tiao">3</span><div class="codebody" id="code62781"> <a href="javascript:countDown"> </a>数秒後に自動的にジャンプします...<br> <meta http-equiv=refresh content=3;url= '/ds02.jsp'/><br> <!--スクリプトの開始--><br> <script language="javascript" type= ""><br>function countDown(secs){<br> tiao.innerText=secs;<br> if(--secs>0)<br> setTimeout("countDown(" secs ")",1000 ); <br> }<br> countDown(3);<br> </script><br> <!--スクリプトの終わり--><br> </head><br><br><br><br>例 6:<br> <br><br> </div> <br><br>コードをコピーします<p></p> <div class="codetitle"> コードは次のとおりです。<span><a style="CURSOR: pointer" data="44219" class="copybut" id="copybut44219" onclick="doCopy('code44219')"><u><head>メタ http-equiv="refresh" content="2;url='b.html'"> </u></head> </a>例 7:</span> </div> <div class="codebody" id="code44219"> <br><br><br>コードをコピー<br> </div> コードは次のとおりです:<p></p> <p><script language="javascript" タイプ="text /javascript"></p> <div class="codetitle"> setTimeout("window.location.href='b.html'", 2000);<span> //次の 2 つは両方とも使用できます<a style="CURSOR: pointer" data="26465" class="copybut" id="copybut26465" onclick="doCopy('code26465')"> //setTimeout( "javascript:location. href='b.html'", 2000);<u> //setTimeout("window.location='b.html'", 2000);</u></script></a> </span> </div> <div class="codebody" id="code26465">例 8:<br> <br><br><br><br><br>コードをコピー<br> </div> コードは次のとおりです:<p></p> <p><span id="totalSecond"> ;2< /span></p> <div class="codetitle"><script language="javascript" type="text/javascript"><span> var Second = document.getElementByIdx_x('totalSecond').innerHTML;<a style="CURSOR: pointer" data="53168" class="copybut" id="copybut53168" onclick="doCopy('code53168')"> if(isNaN( Second)) {<u> //...数値処理メソッドではありません</u> }else{</a> setInterval(function(){</span> document.getElementByIdx_x('totalSecond').innerHTML = --second; </div> if (2 番目 window.location = 'b.html';<br> }<br> }, 1000);<br> } <br></script><br><br><br> <br>js タイマー (1 回実行、繰り返し)<br> <br>JS コードの一部、JS タイマーの小さな例を共有します。これは、1 回実行されるタイマーと繰り返し実行されるタイマーに分かれています。初心者の方のご参考に。 <br> <br>1、1 回だけ実行されるタイマー <br> <br><br> </div> <p>コードをコピー</p> <p></p> コードは次のとおりです。<p></p> <p><script>タイマー非同期 Run </p> <div class="codetitle">function hello(){ <span>alert("hello"); <a style="CURSOR: pointer" data="73058" class="copybut" id="copybut73058" onclick="doCopy('code73058')">} <u>//メソッド名を使用してメソッドを実行します </u>var t1 = window.setTimeout(hello, 1000); </a>var t2 = window.setTimeout("hello()",3000);//文字列実行メソッドを使用します </span>window.clearTimeout(t1);//タイマーを削除します </div></script&gt ;<div class="codebody" id="code73058"> <br><br> <br>2、繰り返し実行用のタイマー<br> <br><br><br><br><br>コードをコピー<br><br> </div> コードは次のとおりです:<div class="codebody" id="code39946"> <br><script> <br>function hello(){ <br>alert("hello"); <br>} <br>//メソッド <br>var t1 = window を繰り返し実行します。 (hello,1000); <br>var t2 = window.setInterval("hello()",3000); <br>//タイマーを削除する方法 <br>window.clearInterval(t1); /script><br><br> </div> 備考: <p> </p>ページ内に 2 つのメソッドがあり、どちらもページが読み込まれた後に実行されますが、実際には順番に実行できない場合は、次のメソッドを参照して問題を解決できます。 onload メソッドの timer では、実行前に一定時間「遅延」するタイマーを設定します。これは、ページの読み込みとメソッドの実行の順序を区別するためと考えられます。 <p> <br></p> <p><br><br></p> <div class="codetitle"><span>コードをコピー<a style="CURSOR: pointer" data="39283" class="copybut" id="copybut39283" onclick="doCopy('code39283')"><u></u> コードは次のとおりです:</a><div class="codebody" id="code39283"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><html xmlns="http://www.w3.org/1999/xhtml"><br><head runat="server"><br>    <title>Untitled Page</title> <p>    <script language="javascript" type="text/javascript"><br>    var YC = new Object();<br>    function beginYC()<br>    {<br>        var secondsYC = document.getElementById("txtYCSeconds").value;<br>        try<br>        { <br>            YC = setTimeout("alert('延迟"+secondsYC+"秒成功')",secondsYC*1000);<br>        }<br>        catch(e)<br>        {<br>            alert("请输入正确的秒数。");<br>        }<br>    }<br>    function overYC()<br>    {<br>        clearTimeout(YC);<br>        YC=null;<br>        alert("终止延迟成功。");<br>    }<br><br>/**************************↓↓↓↓定时器的使用↓↓↓↓********************************/<br><br>    var timerDS = new Object();<br>    var timerDDS = new Object();<br>    function beginDS()<br>    {<br>        sn.innerHTML = "0";<br>        timerDS = setInterval("addOne()",parseInt(document.getElementById("txtIntervalSeconds").value,10)*1000);<br>    }<br>    function goonDS()<br>    {<br>        timerDS = setInterval("addOne()",parseInt(document.getElementById("txtIntervalSeconds").value,10)*1000);<br>    }<br>    function overDS()<br>    {<br>        clearInterval(timerDS);<br>        timerDS=null;<br>    }<br>    function delayDS()<br>    {<br>        overDS();<br>        timerDDS = setTimeout("goonDS()",document.getElementById("txtDDSSeconds").value*1000);<br>    }<br>    function addOne()<br>    {<br>        if(sn.innerHTML=="10")<br>        {<br>            overDS();<br>            alert("恭喜你,已成功达到10秒");<br>            return;<br>        }<br>        sn.innerHTML=parseInt(sn.innerHTML,10)+1;<br>    }<br><br>    </script></p> <p></head><br><body><br>    <form id="form1" runat="server"><br>    <div><br>        延迟器的使用:</div><br>    <div><br>     <label id="Label2" title="延迟秒数:"></label><br>        <input type="text" id="txtYCSeconds" value="3" /><br>        <input type="button" id="btnBYC" onclick="javascript:beginYC()" value="开始延迟" /><br>        <input type="button" id="btnOYC" onclick="javascript:overYC()" value="终止延迟" /><br>        <input type="button" id="Button1" onclick="javascript:alert('good monrning');" value="普通弹窗" /><br>    </div><br>    <br /><br>    <div><br>        定时器的使用:</div><br>    <div><br>    <div id="sn">0</div><br> <label id="Label1" title="タイマー間隔秒:"></label><br> > btnODS" onclick="javascript:overDS()" value="終了タイミング" /> ;<br> <input type="button" id="btnGDS" onclick="javascript:goonDS()" value="継続タイミング " /><BR><BR> <label id="ds" title ="遅延秒数:"></label><br> ="5" /><br> div><br> </form><br></body><br></ html><br><br><br></p> </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="Jquery_jquery の EasyUI コンポーネントの DataGrid 結果セットのクリア メソッド" href="https://m.php.cn/ja/faq/14539.html">Jquery_jquery の EasyUI コンポーネントの DataGrid 結果セットのクリア メソッド</a></span><span>次の記事:<a class="dBlack" title="Jquery_jquery の EasyUI コンポーネントの DataGrid 結果セットのクリア メソッド" href="https://m.php.cn/ja/faq/14541.html">Jquery_jquery の EasyUI コンポーネントの DataGrid 結果セットのクリア メソッド</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="https://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ja/faq/1609.html" title="Bootstrap リスト グループ コンポーネントの詳細な分析" class="aBlack">Bootstrap リスト グループ コンポーネントの詳細な分析</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/1640.html" title="JavaScript関数のカリー化の詳細説明" class="aBlack">JavaScript関数のカリー化の詳細説明</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/1949.html" title="JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)" class="aBlack">JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/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="https://m.php.cn/ja/faq/2351.html" title="JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル" class="aBlack">JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!</p></div><div class="footermid"><a href="https://m.php.cn/ja/about/us.html">私たちについて</a><a href="https://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="https://m.php.cn/ja/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>