iT邦幫忙

0

關於迴圈的一些問題

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

我希望在點及按鈕後,畫面可以先顯示"開始",之後進行迴圈,而迴圈內每筆值可以即時顯示在畫面上,而不是迴圈跑完後才一次顯示,有沒有什麼辦法可以做到這樣的效果呢?

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
8
耿直小伙
iT邦新手 1 級 ‧ 2019-10-16 15:03:53
$('#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);
});
豬豬人 iT邦新手 4 級 ‧ 2019-10-17 10:48:42 檢舉

請問@程式狗 我迴圈裡面還要包迴圈要怎麼寫呢?

2

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

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

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

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

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

1
fillano
iT邦超人 1 級 ‧ 2019-10-17 11:39:03

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);
    }
});

我要發表回答

立即登入回答