Question

我有一个由两个div组成的网页：一个包含画布（名为“光栅”），另一个只有一个问号（名为“qmark”）。

有一组函数和算法可供遵循：

准备画布（使用 paintSines （信号）功能）
当画布准备就绪时，立即显示并隐藏其他所有内容。
等待250毫秒（这是 minTime 变量的值）
尽快隐藏画布并显示问号。
等一下（ maxTime ），然后继续（使用继续（）函数）。

所以我有 setQuestion 函数来处理第1步并调用第2步函数：

function setQuestion(){
    paintSines(signal);
    window.requestAnimationFrame(function () {
        showQuestion();
    });
}

showQuestion 正在处理第2 + 3步，然后调用另一个函数：

function showQuestion(){
    document.getElementById('qmark').hidden = true;
    document.getElementById('gratings').hidden = false;
    setTimeout(waitResp,minTime);
}

最后 waitResp 处理步骤4 + 5：

function waitResp(){
    window.requestAnimationFrame(function () {
        document.getElementById('gratings').hidden = true;
        document.getElementById('qmark').hidden = false;
    });
    setTimeout(proceed, maxTime);
}

这是网页正文：

<body>
    <div id="gratings">
        <canvas id="upperCanvas"></canvas>
        <canvas id="lowerCanvas"></canvas>
    </div>
    <div id="qmark">
        <h1>?</h1>
    </div>
</body>

分离的原因是这是一段共享代码，而 showQuestion 在不同场合的实现方式不同。

我需要算法步骤同步发生，我不能使用jQuery（假设bind（）会这样做）。我得到的是，它没有显示250毫秒的画布，它几乎没有显示它们170毫秒。我怀疑在paintSines完成之前调用了requestAnimationFrame，所以我尝试将它作为回调传递，这没有任何好处：

function setQuestion(){
    paintSinesWithCallback(s.getCurrentSignal(),bla);

    function paintSinesWithCallback(signal,callback){
        paintSines(signal);
        callback();
    }   

    function bla(){
        window.requestAnimationFrame(function () {
          showQuestion();
        });
  }
}

任何想法？

编辑：尝试从 waitResp 中移除requestAnimationFrame并没有改变任何内容：

function waitResp(){
    document.getElementById('gratings').hidden = true;
    document.getElementById('qmark').hidden = false;
    run = setTimeout(proceed,maxTime);
}

同步requestAnimationFrame不与超时一致

0 个答案: