JavaScriptのSetIntervalとは何ですか?どのように機能しますか?



JavaScriptでは、時間に関して関数やメソッドを実行することもできます。 JavaScriptのSetIntervalは、タイミングイベントの一部です。

JavaScriptは、サーバー側のプログラミング言語としてだけでなく、クライアント側のプログラミング言語としても使用されます。それいくつかの機能を簡単に実行するための多数のメソッドを提供します。これが作ったものです 最も人気のあるプログラミング言語の1つであるだけでなく、さまざまな種類の製品開発で広く使用されています。JavaScriptのSetIntervalは、JavaScriptのタイミングイベントの一部であり、次の順序で学習します。

タイミングイベント

JavaScriptはまたの実行を可能にします 機能 プログラムの実行時間ではなく、時間に関するメソッドも同様です。これにより、プログラムの実行時間に関係なく、指定した時間に関数を実行できます。





JavaScriptでタイミングイベントを使用する2つの主要な方法は次のとおりです。

  • setTimeout(関数、ミリ秒)



この関数は、ミリ秒単位で指定された時間の後に1回だけパラメーターとして渡される内部の関数を実行します。

  • setInterval(関数、ミリ秒)

この関数は、実行時間から、時間間隔に達するたびに関数を実行します。時間間隔ごとに関数の実行を繰り返します。



次に、JavaScriptのSetIntervalがどのように機能するかを見てみましょう。

JavaScriptのSetInterval

この関数の最初のパラメーターは実行される関数であり、2番目のパラメーターは各実行間の時間間隔を示します。

var myVar = setInterval(myTimer、1000)function myTimer(){var d = new Date()document.getElementById( 'demo')。innerHTML = d.toLocaleTimeString()}

ここで、document.getElementByIdはから要素を取得します これは「デモ」としてIDを持ち、d.toLocaleTimeString()関数はシステムからの現在の時刻を示します。

Javaでのイテレータの使用

したがって、これは1秒に相当する1000ミリ秒ごとに繰り返されます。したがって、この関数は1秒ごとに繰り返し実行されるため、時刻は1秒ごとに更新されます。

では、どうすればこの実行を停止できますか?確認してみましょう!

実行を停止する方法は?

clearInterval()と呼ばれる別の関数を使用して、関数setInterval()から実行を停止できます。clearInterval()は、関数setInterval()から返された変数を使用します。

jqueryとjavascriptの違いは何ですか

例えば:

myVar = setInterval(function、ミリ秒)clearInterval(myVar)

以下は、setInterval()とclearInterval()の両方を使用する例です。これは時計を開始し、時間を停止するためのボタンを提供します。

 

以下は時計です。

停止時間

上のボタンをクリックして時間を停止します。

var myVar = setInterval(myTimer、1000)function myTimer(){var d = new Date()document.getElementById( 'demo')。innerHTML = d.toLocaleTimeString()}

出力:

出力-javascriptのsetinterval-edureka

setInterval()およびclearInterval()を使用したその他の例。

動的プログレスバーの作成

#myProgress {幅:100%高さ:30px位置:相対背景色:#ddd} #myBar {背景色:#4CAF50幅:10px高さ:30px位置:絶対} 
Click Me function move(){var elem = document.getElementById( 'myBar')var width = 0 var id = setInterval(frame、10)function frame(){if(width == 100){clearInterval(id)} else {width ++ elem.style.width = width + '%'}}}

出力:

初期出力

マージソートc ++ソースコード

「ClickMe」と書かれたボタンをクリックすると出力されます。

2つの背景を切り替える

切り替えの停止varmyVar = setInterval(setColor、300)function setColor(){var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'yellow'? 'ピンク': '黄色'}関数stopColor(){clearInterval(myVar)}

出力:

色は黄色とピンクの間で切り替わります。上記の出力はボタンをクリックする前のものであり、以下の出力はボタンをクリックした後のものです。

これで、JavaScriptのSetIntervalの記事は終わりです。 SetIntervalメソッドがどのように機能するかを理解していただければ幸いです。

チェックしてください Edurekaによる。 Web開発認定トレーニングは、HTML5、CSS3、Twitter Bootstrap 3、jQuery、およびGoogle APIを使用して印象的なWebサイトを作成し、Amazon Simple Storage Service(S3)にデプロイする方法を学ぶのに役立ちます。

質問がありますか?このブログのコメントセクションでそれについて言及してください。折り返しご連絡いたします。