title: Why is the html() function from Ajax creating an infinite loop?
body: <p>I want to output an animation while the database operation is in progress. When the db operation is finished, the contents of the table in the html document will be modified.</p>
  
  <pre><code>&lt;script&gt;
    var jobj = new Object();
    jobj.uid = &lt;?php echo "'".$_SESSION['user_id']."'";?&gt;;
    var jsoninfo = JSON.stringify(jobj); 
    var table_content = '';
  
    jQuery.ajax({
      type:"POST",
      url:"./get_sunda.php",
      contentType : 'application/json; charset=UTF-8',
      data : jsoninfo,
      success:function(data)
      {
        var parse_data = JSON.parse(data);
        var array_unik = parse_data.shift();
        var array_heat = parse_data.shift();
        var f_omni = parse_data.shift();
        var i = 0;
        var j = 0;      
        table_content = $('#tblReport').html();
        console.log(0);
        table_content += some_text;
        $('#tblReport').html(table_content);      
        document.getElementById('Load').style.visibility = "hidden";     
      }
    }); 
  
  &lt;/script&gt;
  </code></pre>
  
  <p>However, when I call the html () function inside an ajax code, it will fall into an infinite loop even though there is no loop.</p>
  
  <p><a href="https://i.stack.imgur.com/7wNgH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7wNgH.png" alt="Console output"></a></p>