この記事では、JavaScript の「setTimeout」に基づいて再帰的非同期関數(shù)を処理し、関數(shù)チェーンの実行完了後に特定のアクションが確実に実行されるようにする方法について説明します。テキストの単語ごとのアニメーションの例を通じて、再帰的コールバック內(nèi)に統(tǒng)合してアニメーションとその後の UI 操作 (ボタンの表示など) の同期を?qū)g現(xiàn)することでステータス検出を完了する方法を詳細に説明し、完全なコード例と関連する注意事項を示します。

非同期再帰とその課題を理解する

JavaScript では、setTimeout や setInterval などのメカニズムを通じて関數(shù)が再帰的に呼び出されると、非同期実行チェーンが作成されます。これは、各再帰呼び出しがすぐに実行されるのではなく、將來のある時點で実行されるようにスケジュールされていることを意味します。このモードは、テキストをそのまま表示するなどのアニメーション効果を?qū)g裝するのに最適です。

次の単純なテキストをそのまま表示する関數(shù)を考えてみましょう。

 var showText = 関數(shù) (ターゲット、メッセージ、インデックス、間隔) {   
    if (インデックス <p>この関數(shù)は文字通り、メッセージの內(nèi)容をターゲット要素に追加します。追加ごとに間隔を置いて追加します。ただし、非同期の性質(zhì)により、showText を呼び出した直後にアクション (ボタンの表示など) を?qū)g行しようとすると、アクションはテキスト アニメーションの完了を待たずに、すぐに実行されます。</p><pre class="brush:php;toolbar:false"> showText($("#box"), "Hello World", 0, 100);
$("#btn").show(); // このコード行は、テキストが表示されるのを待たずに、すぐに実行されます。

これはまさに非同期プログラミングが提起する課題です。非同期操作のチェーンが実際にいつ終了するかを正確に知り、終了後に後続のロジックを?qū)g行できるようにするにはどうすればよいでしょうか。

解決策: 再帰的コールバックに完了ステータス検出を統(tǒng)合する

この問題を解決する鍵は、再帰関數(shù)內(nèi)で、すべての條件が満たされたとき (つまり、すべての文字が表示されたとき)、完了イベントをトリガーするか、後続の操作を?qū)g行することです。これは、setTimeout コールバック関數(shù)に條件判定を追加することで実現(xiàn)できます。

変更された showText 関數(shù)は次のとおりです。

 var showText = function(ターゲット、メッセージ、インデックス、間隔) {
  // 表示する文字がまだある場合 if (index <p><strong>コード分??析:</strong></p><ol>
<li> if (index </li>
<li> $(target).append(message[index]): 現(xiàn)在のインデックス位置にある文字をターゲット要素に追加し、インデックスを増やします。これは、setTimeout コールバックがトリガーされたときに、index がすでに処理される次の文字のインデックス (すべての文字が処理された場合は message.length) を指していることを意味します。</li>
<li> setTimeout(function() { ... }, interval): 非同期タスクをスケジュールします。</li>
<li> showText(ターゲット、メッセージ、インデックス、間隔): setTimeout コールバック內(nèi)で次の再帰呼び出しを行います。</li>
<li> if (index === message.length):<strong>これはキーの完了チェックです。</strong> Index の値が message.length と等しい場合、メッセージ內(nèi)のすべての文字が DOM に追加され、対応する setTimeout タスクもスケジュールされていることを意味します。この時點で、ボタンの表示などの後続の完了アクションを安全に実行できます。</li>
</ol><p>このように、最後の文字が表示された後に $("#btn").show() オペレーションが setTimeout コールバックに埋め込まれ、アニメーションとの同期が実現(xiàn)されます。</p><h3>完全なサンプルコード</h3><p>上記のソリューションを?qū)g証するには、基本的な HTML 構(gòu)造、ボタンを非表示にする CSS、および JavaScript コードが必要です。</p><p> <strong>HTML (index.html):</strong></p><pre class="brush:php;toolbar:false"> 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width、initial-scale=1.0">
    <title>JavaScript の単語ごとのアニメーションとコールバック</title>
    <!--jQuery ライブラリの紹介-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
        /* CSS スタイル*/
        #btn {
            表示: なし。 /*デフォルトではボタンを非表示にします*/
            マージントップ: 20px;
            パディング: 10px 20px;
            フォントサイズ: 16px;
            カーソル: ポインタ;
        }
        ＃箱 {
            最小高さ: 50px; /* テキストを表示するのに十分なスペースがあることを確認してください*/
            境界線: 1px 実線 #ccc;
            パディング: 10px;
            フォントサイズ: 20px;
            フォントファミリー: 等幅;
        }
    スタイル>


    <div id="box"></div>
    <button id="btn">コンテンツを表示</button>

    
        // JavaScript コード var showText = function(ターゲット, メッセージ, インデックス, 間隔) {
            if (インデックス 

以上がJavaScriptの再帰的非同期関數(shù)完了後のコールバック処理：テキストの単語ごとのアニメーションを例にの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。