Javascriptで n 秒ごとにイベントを発火したい

# WEB制作

2020.04.02

みさなま、こんにちは。

今回はJavascriptを使用し、n 秒ごとにイベントを発火する方法をまとめましたので参考にしてください。

Javascriptで n 秒ごとにイベントを発火したい

試しにソースを確認することが1番なので、デベロッパーツールのコンソールを使用し、動作確認をしてみてください。

1秒ごとにイベントを発火したい

まずはソースを記載したので、試してみてください。

コンソールで確認すると1秒ごとに+1の処理が実行されていることを確認できましたでしょうか。

n 秒ごとの n を指定しているのは setInterval(countup, 1000);の1000という数字。

この数字は n ミリ秒となっていますので、1000ミリ秒 = 1秒となります。

つまりこの数字を2000に変更すれば2秒ごとに数字がプラスしていきます。

Javascriptで n 秒後にイベントを発火したい

次に n 秒ごとではなく n 秒後にイベントを発火する方法を。

1秒後にイベントを発火したい

例にもれずまずはソースを記載しました。

コンソールで確認してみてください。

10秒後にアラートが出ることが確認できましたでしょうか。

考え方は n 秒ごとと同じで、それぞれの違いは setInterval と setTimeout という関数の違い。

setInterval とsetTimeoutの違いは簡単

それぞれ何が違うかというと、

setInterval……一定時間ごとに特定の処理を繰り返す

setTimeout ……一定時間後に特定の処理をおこなう(繰り返さずに一度だけ)

たったこれだけで何ともシンプル。

ぜひこちらの関数を使いタイマーを操ってみてください。

 

 

webサイトの制作、お任せください。

あくまでも基本料金になりますので、まずはご連絡ください。

コーディング

トップページ
(ヘッダー・フッター含む)

¥8,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥4,000~

ランディングページ

¥15,000~

※アニメーションはオプション料金

デザイン

トップページ
(ヘッダー・フッター含む)

¥20,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥5,000~

ランディングページ

¥20,000~

※コーディングとのセット料金

サイト構築

10ページ
(お問合せページを含まない)

¥100,000~

20ページ
(お問合せページを含まない)

¥175,000~

Wordpress導入

(上記)+¥50,000~

※お問合せページは¥10,000~