文字の点灯：消灯を１：４の割合にしたいです…
こうした悩みを解決します。本記事はココナラ受注案件です！
記事の内容
・デューティ比とは
・SetIntervalとSettimeoutの組み合わせ
デューティ比（Dと表現する）は、１周期中の点灯時間の割合を表す電気の業界でよく使われる単語です。
たとえば、点灯＝１秒、消灯＝４秒の点滅だとD＝1/(1+4)＝0.2と表します。
私もともと組込みエンジニアでC言語だけでなく電気回路も扱ってたので、
デューティと言われると分かるのですが、純粋なIT系だと何て言うんでしょう？同じ？
というか、そもそも点灯、消灯という言葉も電気っぽいような…表示、非表示と言えばよいですか？
まあいいです、それはそれとして、
今回JavaScriptでON＝３秒、OFF＝１秒の周期で文字を点滅させたいという依頼を受けました。
デューティ比を変えるプログラム
周期を決めるのにsetInterval関数、ON/OFF切り替えタイミングを決めるのにsetTimeout関数を用いてデューティ比を決めます。
setIntervalは(処理, 実行間隔)の2つの要素を引数として定義される関数で、
setInterval関数の呼び出しから実行間隔（ミリ秒単位）毎に処理を行います。
この処理は単一のものに限らず、別に定義した関数を割り当てることもできます。
また、setTimeoutは(処理、実行タイミング)の2つの要素を引数として定義される関数で、
setTimeout関数の呼び出しから実行タイミング（ミリ秒時間）経過後に１度だけ処理を実行します。
この処理も単一のものに限らず、別に定義した関数を割り当てることもできます
setInterval()もsetTimeout()も似てますね。定期実行か単発実行かの違いだけです。
それで、プログラムの組み方について、例えば
１秒周期でON（またはOFF）を繰り返し、ON→OFF（またはOFF→ON）の切り替えを0.7秒毎に繰り返すなら、
・setInterval(ON関数, 1000)
・setTimeout(OFF関数, 1000*0.7)
となります。
そして考え方として大事なのが、setTimeout()を呼び出すタイミングで、
setInterval()の中にsetTimeout()を入れることでそれぞれの始点がほぼ同じになりますね。
サンプルプログラム
CodePenでサンプルプログラム作成したので、よければご確認ください。
setIntervalでblink()を呼び出し、ここで2秒(mesec変数で定義）毎に文字を点灯します。
そしてblink()中にsetTimeoutでblink_off()を呼び出し、文字点灯から1.5秒後に消灯します。
よって、1.5秒点灯、0.5秒消灯のデューティ0.75の点滅プログラムが作れました。
msec変数とsetTimeoutの3/4をいじくってお好きなタイミングで点滅プログラム自作してみてくださいませ。
まとめ
・デューティ比（Dと表現する）は、１周期中の点灯時間の割合を表す電気の業界でよく使われる単語です
・周期を決めるのにsetInterval関数、ON/OFF切り替えタイミングを決めるのにsetTimeout関数を用いてデューティ比を決めます
・サンプルプログラムのmsec変数とsetTimeoutの3/4をいじくってお好きなタイミングで点滅プログラム自作してみてくださいませ
立科プログラミングはウェブページの新規作成、機能追加、修正などの依頼を受け付けております。
まずはお気軽にご連絡いただければと思います！よろしくお願いいたします。