JavaScriptタイマーイベントの使い方を詳しく解説_基礎知識

WBOY
リリース: 2016-05-16 17:04:53
オリジナル
1070 人が閲覧しました

JavaScript でタイミング イベントを使用するのは簡単です。主な方法は次の 2 つです:

setTimeout()
将来のある時点でコードを実行します

clearTimeout()
キャンセル setTimeout()
setTimeout( )
構文

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

var t=setTimeout ("javascript state" , ミリ秒)


setTimeout() メソッドは特定の値を返します。上記のステートメントでは、値は t という名前の変数に格納されます。このsetTimeout()をキャンセルしたい場合は、この変数名で指定できます。
setTimeout() の最初のパラメータは、JavaScript ステートメントを含む文字列です。これは、「alert('5 秒!')」などのステートメント、または、alertMsg() などの関数の呼び出しである可能性があります。

2 番目のパラメータは、最初のパラメータが今から何ミリ秒後に実行されるかを示します。

ヒント: 1000 ミリ秒は 1 秒に相当します。

以下の例のボタンをクリックすると、5 秒後にプロンプ​​ト ボックスが表示されます。

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


< head>







例 - 無限ループ

無限ループで実行されるタイマーを作成するには、それ自体を呼び出す関数を作成する必要があります。以下の例では、ボタンをクリックすると入力フィールドが 0 からカウントを開始します。

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











clearTimeout()

構文

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

clearTimeout(setTimeout_variable)

次の例は、上記の無限ループの例に似ています。唯一の違いは、カウンターを停止するための「Stop Count!」ボタンが追加されたことです。

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













他の 2 つの重要なメソッド:
コードをコピー コードは次のとおりです。

setInterval()
setInterval() - 指定された時間間隔で関数を繰り返し実行します

機能 Yes: 指定された間隔内でメソッドをループで実行します

構文:

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

window.setInterval("javascript function",milliseconds);

注: 最初のパラメータは関数である必要があり、2 番目のパラメータは関数の実行間隔です。

例:

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


< script type= "text/javascript">
setInterval(function() {alert("hello")},500);


注: 上記の例では、実行効果は 500 ミリ秒ごとにalert("hello") になります。

別の時計:

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


< body>





setInterval() メソッドを停止するには??

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

window.clearInterval()

構文:
コードをコピー コードは次のとおりです以下:

window.clearInterval(intervalVariable)


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

window.clearInterval() メソッドは、ウィンドウ プレフィックスなしで記述できます。

clearInterval() メソッドを使用できるようにするには、interval メソッドの作成時にグローバル変数を使用する必要があります。

myVar=setInterval("javascript function",milliseconds);
その後、clearInterval() メソッドを呼び出すことで実行を停止できます。

例:

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




stop




}



ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート