Question

我很困惑并且厌倦了努力让它发挥作用...... 在一个页面上，进行抽奖（select SQL）并通过echo（divs）乘坐style.display = none（PHP）。到目前为止一直很好，每个DIV都有ID。我有BUTTON调用Javascript函数来显示DIV's。在此函数中，放置一个循环。但浏览器仅在遍历循环后显示DIV，甚至使用setTimeout函数。

EX。

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

我需要每2秒显示一次DIV。只需单击按钮Raffle，每2秒一个接一个。

有人可以帮助我吗？

Answer 1

您可以使用setInterval函数：

<button Onclick="setInterval(ShowDivs(<?php echo $numParticipants ?>),2000)">

的javascript：

id=0 //Use ids starting from zero!
function ShowDivs(numOfDivs) {
    window.document.getElementById(id).style.display = "block";
    id++;
    if(id == numOfDivs)
        {
            clearInterval(showDivsInterval);
            id=0;
        }
}

有关setInterval的更多信息：http://www.w3schools.com/jsref/met_win_setinterval.asp

Answer 2

由于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();
        }
    };

Answer 3

问题是你的延迟函数是busy wait，导致浏览器窗口线程冻结。在我所知道的所有浏览器中，它是执行javascript并呈现HTML的相同线程。由于您在繁忙的等待命令时阻塞CPU，命令：window.document.getElementById(id).style.display = "block";只更新HTML或CSS，但线程没有时间重新呈现页面...

正如其他人所建议的那样，你应该使用间隔。

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

3 个答案: