Artikel ini meneroka cara mengendalikan fungsi asynchronous rekursif berdasarkan `setTimeout` dalam JavaScript untuk memastikan tindakan tertentu dilakukan selepas rantaian fungsi telah menyelesaikan pelaksanaan. Melalui contoh animasi kata-kata teks, ia menerangkan secara terperinci bagaimana untuk menyelesaikan pengesanan status dengan mengintegrasikan dalam panggilan balik rekursif untuk mencapai penyegerakan animasi dan operasi UI berikutnya (seperti memaparkan butang), dan menyediakan contoh kod lengkap dan langkah berjaga-jaga yang berkaitan.

Memahami rekursi tak segerak dan cabarannya

Dalam JavaScript, apabila fungsi dipanggil secara rekursif melalui mekanisme seperti setTimeout atau setInterval, ia mewujudkan rantaian pelaksanaan tak segerak. Ini bermakna setiap panggilan rekursif dijadualkan akan dilaksanakan pada satu ketika di masa depan, dan bukannya segera. Mod ini sangat bagus untuk melaksanakan kesan animasi, seperti teks yang muncul verbatim.

Pertimbangkan fungsi paparan verbatim teks mudah berikut:

 var showText = fungsi (sasaran, mesej, indeks, selang) {   
    jika (indeks <message.length .append tambah aksara dan kenaikan indeks membuat panggilan rekursif melalui settimeout untuk rantaian asynchronous showtext mesej selang><p> Fungsi ini secara harfiah menambah kandungan mesej ke elemen sasaran, dengan kelewatan selang antara setiap penambahan. Walau bagaimanapun, disebabkan sifatnya yang tidak segerak, jika anda cuba melakukan tindakan (seperti memaparkan butang) sebaik sahaja memanggil ShowText, tindakan itu tidak akan menunggu animasi teks selesai, tetapi akan dilakukan dengan segera:</p>
<pre class="brush:php;toolbar:false"> showText ($ ("#box"), "Hello World", 0, 100);
$ ("#btn"). tunjukkan (); // Barisan kod ini akan dilaksanakan dengan segera dan bukannya menunggu teks dipaparkan.

Inilah cabaran yang ditimbulkan oleh pengaturcaraan asynchronous: bagaimana untuk mengetahui dengan tepat ketika rantai operasi tak segerak sebenarnya berakhir, sehingga logik berikutnya dapat dilaksanakan setelah selesai?

Penyelesaian: Mengintegrasikan pengesanan status penyelesaian dalam panggil balik rekursif

Kunci untuk menyelesaikan masalah ini ialah, di dalam fungsi rekursif, apabila semua syarat dipenuhi (iaitu semua aksara telah dipaparkan), mencetuskan acara penyelesaian atau melakukan operasi berikutnya. Kita boleh mencapai ini dengan menambahkan penghakiman bersyarat dalam fungsi panggilan balik SetTimeout.

Fungsi showtext yang diubahsuai adalah seperti berikut:

 var showText = fungsi (sasaran, mesej, indeks, selang) {
  // ketika masih ada aksara yang akan dipaparkan jika (indeks <message.length .append tambahkan aksara semasa dan kenaikan indeks jadualkan panggilan rekursif seterusnya settimeout showtext mesej selang menunjukkan bahawa semua hingga mesej.length telah diproses. jika message.length tunjukkan dipaparkan butang><p> <strong>Analisis Kod:</strong></p>
<ol><li> jika (indeks <message.length ini adalah keadaan penamatan rekursi. apabila indeks mencapai mesej.length semua aksara telah dipaparkan dan fungsi tidak lagi dipanggil secara rekursif.><li> $ (sasaran) .append (mesej [indeks]): Tambah watak pada kedudukan indeks semasa ke elemen sasaran, dan kemudian tingkatkan indeks. Ini bermakna apabila panggilan balik setTimeout dicetuskan, indeks sudah menunjuk kepada indeks watak seterusnya yang akan diproses (atau mesej.Length jika semua aksara telah diproses).</li>
<li> setTimeout (fungsi () {...}, selang): Jadualkan tugas tak segerak.</li>
<li> ShowText (sasaran, mesej, indeks, selang): Buat panggilan rekursif seterusnya di dalam panggilan balik setTimeout.</li>
<li> jika (index === message.length): <strong>Ini adalah pemeriksaan penyelesaian utama.</strong> Apabila nilai indeks adalah sama dengan mesej. Length, ini bermakna bahawa semua aksara dalam mesej telah ditambahkan ke DOM, dan tugas setTimeout yang sepadan juga telah dijadualkan. Pada ketika ini, kami dapat dengan selamat melakukan tindakan penyempurnaan berikutnya, seperti memaparkan butang.</li></message.length>
</li></ol>
<p> Dengan cara ini, operasi $ ("#btn").</p>
<h3> Kod sampel lengkap</h3>
<p> Untuk menunjukkan penyelesaian di atas, kita memerlukan struktur HTML asas, beberapa CSS untuk menyembunyikan butang, dan kod JavaScript.</p>
<p> <strong>Html (index.html):</strong></p>
<pre class="brush:php;toolbar:false"> 


    <meta charset="utf-8">
    <meta name="viewport" content="width = peranti-lebar, skala awal = 1.0">
    <tirtment> JavaScript Word-by-Word Animation and Callback 
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
    <yaya>
        /* Gaya CSS*/
        #btn {
            Paparan: Tiada; /*Sembunyikan butang secara lalai*/
            margin-top: 20px;
            Padding: 10px 20px;
            saiz font: 16px;
            kursor: penunjuk;
        }
        #box {
            Min-ketinggian: 50px; /* Pastikan terdapat ruang yang cukup untuk memaparkan teks*/
            Sempadan: 1px pepejal #ccc;
            Padding: 10px;
            saiz font: 20px;
            Font-Family: Monospace;
        }
    


    <div id="box"> </div>
    <butang id="btn"> Tunjukkan kandungan </butang>

    <script>
        // kod javascript var showText = function (sasaran, mesej, indeks, selang) {
            jika (indeks <message.length) {
                $ (sasaran) .append (mesej [indeks]);
                setTimeout (fungsi () {
                    showText (sasaran, mesej, indeks, selang);
                    // Apabila semua aksara telah dipaparkan, laksanakan panggilan balik jika (index === message.length) {
                        $ ("#btn"). tunjukkan (); // butang tunjukkan}
                }, selang);
            }
        };

        // Mulakan animasi selepas halaman dimuatkan $ (dokumen). Ready (fungsi () {
            showText ($ ("#box"), "ini adalah teks yang akan dipaparkan verbatim. Apabila semua teks dipaparkan, butang di bawah akan muncul secara automatik.", 0, 100);
        });
    </script>

</yaya></tirtment>

Simpan kod di atas sebagai index.html dan buka dalam penyemak imbas anda. Anda akan melihat teks yang dipaparkan verbatim. Butang "Kandungan Tunjukkan" tidak akan muncul sehingga semua teks dipaparkan.

Nota dan pemikiran lanjutan

1. Ketepatan indeks === Mesej.length: Keadaan ini memastikan bahawa operasi berikutnya hanya akan dilaksanakan apabila watak terakhir ditambahkan ke DOM dan panggilan balik setTimeout yang sepadan dicetuskan.
2. Pengendalian ralat: Untuk fungsi rekursif yang lebih kompleks, anda mungkin ingin mempertimbangkan mekanisme pengendalian ralat. Sebagai contoh, jika ralat berlaku semasa animasi, bagaimana untuk menghentikan rekursi dan memberitahu pengguna.
3. Corak Asynchronous Lebih Moden: Untuk proses asynchronous yang lebih kompleks, secara langsung dalam panggilan balik

Atas ialah kandungan terperinci Pemprosesan Panggilan balik selepas JavaScript Fungsi Asynchronous Rekursif Selesai: Mengambil Teks Animasi Kata-Kata sebagai contoh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!