Javascript getElementById 在结束循环之前显示隐藏的 div

Question

我很困惑，也厌倦了试图让它发挥作用......在一页上，通过 echo (PHP) 进行抽奖 (select SQL) 并乘坐 div (style.display = none) )。到目前为止一切顺利，每个 DIV 都有 ID。我有一个 BUTTON，它调用一个 Javascript 函数来显示 DIV。在此函数中放置一个循环。但即使使用 setTimeout 函数，浏览器也只会在遍历循环后显示 DIV。

前。

HTML:

<div id="1"> </div>
<div id="2"> </div>
<div id="3"> </div>
<div id="4"> </div>
<div id="5"> </div>

*注意:div id 正在创建依赖行SQL SELECT

<button Onclick="ShowDivs(<?php echo $numParticipants ?>)">Raffle</button>

JavaScript:

id=1;
function ShowDivs(participants) {
    do {
        window.document.getElementById(id).style.display = "block";
        delay(1000); 
        alert(); // I need remove this alert
        id ++ ;
    } while (id<=participants);
} 

function delay(millis){
        var date = new Date();
        var curDate = null;
        do { curDate = new Date(); }
        while(curDate-date < millis);
}

我需要每个 DIV 每 2 秒显示一次。只需单击“抽奖”按钮，每 2 秒就一一进行。

请问有人可以帮助我吗？

Answer 1

由于borswer无法处理消息，因此，您必须使用超时来解决此问题

function Click() {
        ShowDivsTimer.start();
    }

    var ShowDivsTimer = {
        id: 1,
        timer: null,
        start: function() {
            this.timer = setInterval(this.process, 200);
        },
        stop: function() {
            if (this.timer != null) {
                clearInterval(this.timer);
                this.timer = null;
                this.id = 1;
            }
        },
        process: function() {
            var elem = document.getElementById(ShowDivsTimer.id);
            if (elem != null) {
                elem.style.display = "block";
                ++ShowDivsTimer.id;
            }
            else ShowDivsTimer.stop();
        }
    };