PR

文字点滅のデューティ比を可変するプログラムを紹介【JavaScript】

フロントエンド

文字の表示:非表示を1:4の割合にしたいです…

こうした悩みを解決します。本記事はココナラ受注案件です。

立プロ

新卒でメーカーに入り、10年間組み込みの現場で設計を行う。
今は個人事業主として自作の組み込み機器開発や、エージェント様に紹介いただき業務委託を行っています。
C,C#,JavaScript, Vue, PHP, VBA, GAS, Kotlinなど、扱う言語が増えゆく日々。

立プロをフォローする

サンプルプログラム

はじめに本記事で制作するプログラムのサンプルを示します。

テキストを1.5秒表示、0.5秒非表示(=デューティ比0.75)で切り替えるプログラムです。

デューティ比とは

デューティ比(Dと表現する)は、1周期中のオン時間の割合を表す電気の業界でよく使われる単語です。

たとえば、表示=1秒、非表示=4秒だと、D = 1 / (1+4) = 0.2と表します。

私もともと組込みエンジニアでC言語だけでなく電気回路も扱ってたので、デューティと言われると分かるのですが、純粋なIT系だと何て言うんでしょう?同じ?

まあいいです、それはそれとして、

今回JavaScriptでON=3秒、OFF=1秒の周期で文字を点滅させたいという依頼を受けました。

デューティ比を変更する

周期を決めるのにsetInterval関数、ON/OFF切り替えタイミングを決めるのにsetTimeout関数を用いてデューティ比を決めます。

setIntervalは(処理, 実行間隔)の2つの要素を引数として定義される関数で、setInterval関数の呼び出しから実行間隔(ミリ秒単位)毎に処理を行います。

この処理は単一のものに限らず、別に定義した関数を割り当てることもできます。

また、setTimeoutは(処理、実行タイミング)の2つの要素を引数として定義される関数で、setTimeout関数の呼び出しから実行タイミング(ミリ秒時間)経過後に1度だけ処理を実行します。

この処理も単一のものに限らず、別に定義した関数を割り当てることもできます

setInterval()もsetTimeout()も似てますね。定期実行か単発実行かの違いだけです。

それで、プログラムの組み方について、

例えば1秒周期でON(またはOFF)を繰り返し、ON→OFF(またはOFF→ON)の切り替えを0.7秒毎に繰り返すなら、

・setInterval(ON関数, 1000)
・setTimeout(OFF関数, 1000*0.7)

となります。

そして考え方として大事なのが、setTimeout()を呼び出すタイミングで、setInterval()の中にsetTimeout()を入れることでそれぞれの始点がほぼ同じになりますね。

まとめ

・デューティ比(Dと表現する)は、1周期中の点灯時間の割合を表す電気の業界でよく使われる単語です
・周期を決めるのにsetInterval関数、ON/OFF切り替えタイミングを決めるのにsetTimeout関数を用いてデューティ比を決めます

立科プログラミングはウェブページの新規作成、機能追加、修正などの依頼を受け付けております。
まずはお気軽にご連絡いただければと思います!よろしくお願いいたします

タイトルとURLをコピーしました