AngularJS の SetInterval
この記事では、AngularJS の setInterval() を例とともに紹介します。
AngularJS の setInterval()
Angular で大きな生産性の高いアプリケーションに取り組んでいる間、特定のタスクの間隔を設定する必要があります。これらのタスクは、一定の間隔を置いた後、いくつかの重要なデータを自動的に処理します。
たとえば、データベース全体のバックアップを取りたい場合は、間隔時間を 24 時間に設定して、24 時間ごとにバックアップされるようにすることができます。
アプリケーションで最新のアクティビティ、投稿、または通知を表示する場合は、AngularJS アプリケーションで setInterval() メソッドを使用できます。このメソッドは 2つのパラメーターを取ります。
最初のパラメーターは、各間隔の後に実行される関数です。2 番目のパラメーターは、ミリ秒単位の時間です。
setInterval() メソッドは、間隔をミリ秒単位で指定する関数です。setInterval() メソッドは、アプリケーションの実行中に実行を継続します。
setInterval() メソッドを停止するメソッドは 2つだけです。アプリケーションを閉じるか、別のメソッド clearInterval() を使用して、setInterval() メソッドを終了できます。
setInterval() メソッドの構文を以下に示します。
newInterval = setInterval(function(), milliseconds);
実行を停止する場合は、clearinterval() メソッドを使用する必要があります。このメソッドの構文を以下に示します。
clearInterval(newInterval);
現在の時刻を取得し、setInterval() メソッドを使用して毎秒更新する例を見てみましょう。この例のコードを以下に示します。
<!DOCTYPE html>
<html>
<body>
<p id="timer"></p>
<script>
setInterval(newTimer, 1000);
function newTimer() {
const newDate = new Date();
document.getElementById("timer").innerHTML = newDate.toLocaleTimeString();
}
</script>
</body>
</html>
出力：
上記の例は、時刻が 1 秒ごとに更新されることを示しています。ここで、必要なときにいつでも時間を停止するオプションを追加する場合は、clearInterval() メソッドを使用できます。
以下に示すように、同じ例を実行し、clearInterval() メソッドを使用して時間または setInterval() メソッドを停止するボタンを追加してみましょう。
<!DOCTYPE html>
<html>
<body>
<p id="timer"></p>
<button onclick="newStopFunc()">Stop Time By Clicking This Button</button>
<script>
const newInterval = setInterval(newTimer, 1000);
function newTimer() {
const newDate = new Date();
document.getElementById("timer").innerHTML = newDate.toLocaleTimeString();
}
function newStopFunc() {
clearInterval(newInterval);
}
</script>
</body>
</html>
出力：
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn