如何确保命令顺序运行(jQuery - Qualtrics中的超时问题)

Question

我正在使用java脚本设计一个qualtrics实验。对于我研究中的每个问题，参与者都需要猜测正确答案，输入它，然后点击空格按钮。一旦他们按下空格按钮，逻辑就会检查他们的答案是否正确。如果答案正确，声音应该播放1.2秒，背景颜色应该变成红色一秒钟，然后又变回白色，最后实验应该自动移动到下一个问题。

到目前为止，我找出了正确的命令顺序。但是，我似乎没有正确使用 setTimeout 逻辑。无论我使用哪种超时值组合，我都无法让它在屏幕移动到下一个问题之前播放所有中间步骤，包括音频播放和红色背景闪烁。

在这里，我分享了我的代码。我将非常感谢任何帮助。

Qualtrics.SurveyEngine.addOnload(function()
    {
        /*Place your JavaScript here to run when the page loads*/  
    });
    Qualtrics.SurveyEngine.addOnReady(function()
    {
        /*Place your JavaScript here to run when the page is fully displayed*/
        var qid = this.questionId;
        var changepage = null;
        /*focus on the box*/
        jQuery("#"+qid+" .InputText").select().focus();
        document.onkeydown = function(event) {
            console.log('keydown',event);
             if (event.which == 32) { //hit the space button
                event.preventDefault();
                 //read the input
                input = jQuery("#"+qid+" .InputText").val();
                console.log(input);
                 if (input.trim().toLowerCase() == "cat") {
                     //alert(input.trim().toLowerCase());
                    document.getElementById("correct").play(); //play the correct sound which is 1.2seconds long
                    setTimeout(jQuery("body").css("background-color","red"), 3000); // change the background color
                     setTimeout( jQuery('#NextButton').click(), 2000) //move on to the next question
                 } //end of if       
             } // end of if 32  
        }  //end of down button
    });
    Qualtrics.SurveyEngine.addOnUnload(function()
    {  
        jQuery("body").css("background-color","white");                 
    });

Answer 1

setTimeout 是异步的。如果您希望多个 setTimeout 以固定顺序执行，则时间必须是累加的。因此，您的NextButton计时应为5000ms（3000ms + 2000ms）。

或者，您可以将"下一步按钮"单击放在背景颜色更改设置超时函数中。除此之外，您能否将两者放在音频的"结束"事件中。

Answer 2

 if (input.trim().toLowerCase() == "cat") {
                 //alert(input.trim().toLowerCase());
                 //play the correct sound which is 1.2seconds long

                 vid.play();
                 vid.onended = function() 
                 { 
                     jQuery(".skirt").css("background-color","red");
                     jQuery('#NextButton').click();
                 };
             } //end of if