如何确保命令顺序按顺序运行（jQuery中的超时问题-Qualtrics）

Question

I am designing an experiment in qualtrics using java script. For each question in my study, a participant needs to guess the correct answer, type it in, and then hit the space button. Once they hit the space button, a logic checks whether their answer is correct or not. If the answer was correct, a sound should be played for 1.2 seconds, the background color should change into red for a second and then back to white, and lastly the experiment should automatically moves on to the next question.

So far, I figured out the correct sequence of commands. However, it seems like i am not using the setTimeout logic correctly. no matter what combination of timeout values I used, I couldn't get it play all the middles steps, including the audio play and red background flash, before the screen moves to the next question.

Here, I 've shared my code. I would very much appreciate any help.

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 is asynchronous. If you want multiple setTimeouts to execute in a fixed order then the times have to be additive. So your NextButton timing should be 5000ms (3000ms + 2000ms).

Alternatively, you could put the NextButton click inside the background color change setTimeout function. To add to that, could you put both inside an 'ended' event on your audio.

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