共有:Promiseを用いて、JavaScriptの非同期関数を同期的に動かします。本記事は、記事「setTimeoutを用いて、非同期関数を同期的に動かす」の続きになります。基本はsetTimeoutですが、setTimeoutを利用すると「見た目」が複雑になります。setTimeoutにPromiseを追加することで、「見た目」がシンプルになります。(注)「見た目」が複雑プログラムのネスト(nest、入れ子)が多段階になり、ネストが深くなった状態。プログラムの可読性が低い状態。(注)「見た目」がシンプルプログラムのネストが浅くフラットな状態。プログラムの可読性が高い。同期的に動くプログラムが「同期的に動く」とは、プログラムの上から下に向かって、順番に処理が進むことです。C();});プログラム1で、上から順番に処理が進んだ場合、同期的に動いたことになります。A()が動くB()が動くC()が動く非同期的に動くプログラムが「非同期的に動く」とは、「同期的には動かない」ことです。プログラム1で、同期的に動かなかった場合、非同期的に動いたことになります。同期的に動きます(同期処理)。プログラム2ボタンをクリックすると、テキストエリアに数字を表示するプログラム。同期関数});プログラム2は、上から下に向かって順番に1行ずつ処理が進みます。非同期的に動きます(非同期処理)。ボタンをクリックすると、次の動きをするプログラムを作りたいとします。仕様Aを、単純にプログラムにすると、以下となります。同期関数});(注)slideUp(1000)スライドアップ(slideUP)は、要素を上方向にスライドして隠します。数字の1000は、デュレーション(duration)で、スライド開始から完了までの時間です。単位はm秒で、1000と書けば、1000m秒すなわち1秒となります。(注)slideDown(1000)スライドダウン(slideDown)は、隠れている要素を下方向にスライドして表示します。数字の1000は、デュレーション(duration)です。プログラム3の、slideUp()、slideDown()は非同期関数です。そのため、プログラム3は非同期的に動きます。実際に動作させると、以下の順に動きます。テキストエリアに、「10」と表示テキストエリアに、「20」と表示テキストエリアを、1秒かけて非表示にする(スライドアップ)テキストエリアを、1秒かけて表示する(スライドダウン)この動きは、意図した動き(仕様A)になっていません。仕様A通りに動くプログラムを作るには、非同期関数を同期的に動かす必要があります。非同期関数を同期的に動かすsetTimeoutを用いた同期処理setTimeoutを用いることで、非同期関数を同期的に動かすことができます。非同期関数A()の処理時間がduration_Aの場合、setTimeoutを用いて、同期関数B()をduration_A後に動かしています。同期関数B()が動くsetTimeoutを用いることで、A()が動き、その後にB()が動いています。(注)詳細は、記事「setTimeoutを用いて、非同期関数を同期的に動かす」をご参照ください。仕様Aを、setTimeoutを用いたプログラムにします(プログラム5)。スライドアップのデュレーションです。スライドダウンのデュレーションです。ボタンをクリックすると、以下の順で、同期的にプログラムが動きます。基本的には、上述した「setTimeoutを用いた同期処理」です。それに、DeferredやPromiseを追加することで、「ネストが深くなる」難点を回避します。非同期関数A()の次の処理(ここでは、B())を、以下の手順で変形します。テキストエリアに、「10」と表示するまず、setTimeoutを用いて、同期処理に対応するよう変形します。duration_A後に、テキストエリアに「10」と表示する次に、DeferredやPromiseを追加します(2、5、7行目)。defer.promise();}プログラム6は、以下の流れで動作します。.then(promiseの状態が「resolve」に変化したら)、C()を実行duration_A後に実行されるのは、以下となります。テキストエリアに「10」と表示C()仕様Aを、Promiseを用いたプログラムにします(プログラム7)。Promiseを返します。そのため、.then()で返したPromiseは以下のように連結できます。);また、以下のように表記を簡略化できます。コメントをキャンセルメールアドレスが公開されることはありません。高齢者が使用するラジオを購入しました。カメラにはピントが合う範囲があります。ページ上にJavaScriptを用いて点を描画します。ここでも、やはり、Canvasを使用します。「PhpSpreadsheet」というPHP対応のExcel操作ライブラリを利用しました。カメラの「絞り」により、ピント合わせに限界が生じます。ページを開けると、1分のカウントダウンが始まる、1分タイマーを作ります。プログラムで判別します。デジタルカメラには撮像素子が使われています。撮像素子は長方形で、大きさは縦3.6cm、横2.4cm程度です。Submitボタンを設置する方法を調べました。ライセンスの下に提供されています。WordPress.。