Question

我想在屏幕上显示图像。一旦显示图像，用户应该能够按下一个键。我还没弄清楚如果图像已经显示，如何只允许按键。我遇到了Promises，但我不知道如何将它们用于我的具体问题。因此，在启用键盘响应功能之前，应该完成显示图像的功能。

<div id='area'>
<div id="div"></div>
</div>
<button id="Button" onclick="start();"> Go </button>

使用Javascript：

function display_image(){
$('#div').addClass("circle");
}

function keyboard_response(){
document.onkeydown = function(event) {
alert("key pressed");
};
}

function start(){
display_image();
keyboard_response();
}

小提琴：http://jsfiddle.net/6bV9A/6/

按下＆＃34; Go＆＃34; -Button后，应显示图片。之后，keyboard_response（）函数应该可以工作。在这里，它并没有产生巨大的差异，因为它不需要时间来显示图像，但想象我想要显示更多的图片，它需要500毫秒。在此期间，不应该按键。

Answer 1

This 是使用jQuery的解决方案。

$(function(){
  var customName = 'my_events';
  var display_image = function(){
    var img = $('<img src="http://placehold.it/300x300">');
    $('#area').append(img);
    img.on('load.'+customName, keyboard_response);
  };
  var keyboard_response = function (){
    $(document).on('keydown.'+customName, function(e) {
      alert("key pressed:" + e.which);
    });
  };
  $('#go').on('click.'+customName, display_image);
});

我使用jQuery的原因是因为它提供了跨浏览器支持。＆＃34; my_events＆＃34;使用"off"方法

，您可以轻松删除事件

获得键盘响应的承诺

1 个答案: