$('#check_city').on('click', function() {
    $('#correct').append('<p>開始</p>');

    let time = 1000; // 間隔毫秒
    let s = 0;
    setInterval(function() {
        if (s < 10000) {
            $('#correct').append('<p>' + s + '</p>');
        }

        s++;
    }, time);
});

程式狗已經算解答你的問題了，就是將顯示放慢一點。

這邊其實你有一個觀念搞錯了。就是你認為是「迴圈跑完後才一次顯示」
其實認真來說，它也是一個回圈顯示一個的。並非是你說的回圈跑完才一次顯示。

會讓你這樣感覺的原因是。你覺得回圈10000次再加上append插入運行，需要多少時間呢??
答案是不到1秒。

也就是說，它在1秒內已經跑完10000次的回圈了。讓你誤以為是「迴圈跑完後才一次顯示」

那想要有步進感要怎麼辦呢??就像是程式狗給你的程式碼那樣。給個計時器就好。
這樣就可以每一秒跑1次來說10000秒了。這樣你就不會感覺到「迴圈跑完後才一次顯示」

append的執行是非同步的，因為這個動作執行速度慢。他就是把append的請求丟給瀏覽器的render engine去執行然後不等待完成就直接返回，所以不會影響迴圈執行的速度。

Javascript迴圈執行速度很快，當append的動作被瀏覽器的render engine執行時，就已經跑完，所以取到的s是迴圈跑完後的結果。要讓每次apeend都確實取得當時的s，你可以用閉包來保存：

$('#check_city').on('click',function(){
    $('#correct').append('<p>開始</p>');
    for(let s = 0; s<10000; s++){
        (function(s){
            console.log(s);
            $('#correct').append('<p>'+s+'</p>');
        })(s);
    }
});