It may be a silly question but I can't easily figured it out why it behave like this

I have two ajax call function,

execCommand() : for execute shell command through php

shell_exec('ping 127.0.0.1 > ../var/log/tmp.log');

getLog() : for collecting logs of execCommand() [../var/log/tmp.log] and display to user [live read]

echo file_get_contents(../var/log/tmp.log);

This is the jquery ajax script

    $("#docker_install_fek").on("click",function(){

        $('#progress-window').show();
        getLog();
        execCommand();
    });

    function execCommand(){

        $.ajax({
            url: '<?php echo $block->getUrl('meta/reports/ajax',[]);?>',
            type: 'POST',
            data:{ip:$("#ip").val()},
            success: function(data) {
                alert(data);
            },
            error: function() {
                alert("fail");
            }
        });

    }
    function getLog() {

        $.ajax({
            type: "GET",
            url: "<?php echo $block->getUrl('meta/reports/progress',[]);?>",
            dataType: "text",
            success: function (data) {
                $("#progress-window").empty();
                $("#progress-window").append("<pre>"+data+"</pre>");
                $("#progress-window").scrollTop(1E10);
                setTimeout(getLog, 3000);
            },
            headers: {
                "Range" : "bytes=-500"
            }
        });
    }

I notice in firebug net tab, both ajax calls are loading but it never render the log untill execCommand() finish the execution.

I don't know what is the main reason, I test like run ping 127.0.0.1 > ../var/log/tmp.log from terminal then comment execCommand() now getLog() function update log file every 3 seconds.