How can I display an image for 3 seconds then hide it, then advance to next question on space bar?

This is the code I have. It works well, but the space bar will work anytime to advance to the next question. I only want that to work after the 3 seconds has elapsed. Ideas?
Qualtrics.SurveyEngine.addOnReady(function() 
{

  this.hideNextButton();
var img = jQuery("#"+this.questionId+" img");
setTimeout(function() { img.hide(); },3000);

 });

Qualtrics.SurveyEngine.addOnload(function() {
var qid = this.questionId;

document.onkeydown = function(event) {
console.log('keydown',event);
if (event.which == 32) {
event.preventDefault();
jQuery('#NextButton').click();
}
}
});

Hi mhv,
Try moving your spacebar function to only bind after 3 seconds. I've chunked it together with your image hiding code (you may need to move everything to onReady) but you could set it up separately if you wanted.
this.hideNextButton();
var qid = this.questionId;
var img = jQuery("#" + this.questionId + " img");

//wait 3 seconds, then hide image and prepare spacebar check
setTimeout(function() {
myFunction();
}, 3000);

function myFunction() {
//hide the image
img.hide();

//check if spacebar pressed, if yes then proceed to next question
document.onkeydown = function(event) {


console.log('keydown', event);


if (event.which == 32) {
event.preventDefault();
jQuery('#NextButton').click();
}
}
}
Good luck!
EDIT: you will probably want to modify this so that event.preventDefault() fires if the spacebar is pressed before 3 seconds as well, so that the page doesn't scroll down.