如何按顺序确保命令顺序 运行（jQuery 中的超时问题 - Qualtrics）
How to ensure sequence of commands run sequentially (Timeout issue in jQuery - Qualtrics)
我正在使用 java 脚本设计一个定性实验。对于我研究中的每个问题，参与者需要猜测正确答案，输入答案，然后点击 space 按钮。一旦他们点击 space 按钮，逻辑就会检查他们的答案是否正确。如果答案是正确的，声音应该播放 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");
});
setTimeout 是异步的。如果您希望多个 setTimeouts 以固定顺序执行，那么时间必须是相加的。所以你的 NextButton 时间应该是 5000ms (3000ms + 2000ms).
或者，您可以将 NextButton 单击放在背景颜色更改 setTimeout 函数中。除此之外，您能否将两者都放在音频的 'ended' 事件中。
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
我正在使用 java 脚本设计一个定性实验。对于我研究中的每个问题，参与者需要猜测正确答案，输入答案，然后点击 space 按钮。一旦他们点击 space 按钮，逻辑就会检查他们的答案是否正确。如果答案是正确的，声音应该播放 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");
});
setTimeout 是异步的。如果您希望多个 setTimeouts 以固定顺序执行，那么时间必须是相加的。所以你的 NextButton 时间应该是 5000ms (3000ms + 2000ms).
或者，您可以将 NextButton 单击放在背景颜色更改 setTimeout 函数中。除此之外，您能否将两者都放在音频的 'ended' 事件中。
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