I have a recursive Function to read data and have some code Jquery in that function. My data:

const data = {
    name: "Quotes"
    children: [
        { 
             name: "Quotes/Quote - Quote 1 - 1",
             children: [],
             ....
        }, 
        { 
             name: "Quotes/Quote",
             children: [{..}, {...}, ...],
             ....
        },
        { 
             name: "Body",
             children: [{..}],
             ....
        },
        ...
    ],
    .....
}

My Code:

// index.html
<div id="label">Start parse data ...</div>

// index.js
function parseData(data) {
     $('#label').text(data.name);
     console.log(data.name);  //  I put console to track data

     ...... // my code to process
     
     if (data.children.length) {
          for (const childrenData of data.children) {
               parseData(childrenData);
          }
     }
    
     
}

const data = $.ajax(.....)  // data return from ajax is above,

parseData(data);

$('#label').text("==== Done ====");

The result, my text is "Start parse data ...", after few second, it change to "==== Done ====". My expectation is it change to data.name during parseData().

I have track my recursive function by console.log() and data is working fine.

I have searched on Internet and somebody said that put into setTimeout(), but it is NOT still working

setTimeout(() => $('#label').text(data.name), 0);