Question

我正在尝试在按键事件中呈现的一系列刺激中插入延迟。下面的代码显示了我如何尝试在刺激之间插入1000毫秒的延迟（即，在按下按键之后，它应该在下一次刺激出现之前需要1000毫秒）。但似乎没有延迟。我错在哪里（使用setTimeout更好吗？）

并且：我怎样才能将每个刺激的最大“显示时间”设置为2000毫秒，这样即使没有按键也会自动呈现另一个刺激？

var stim = [ 
        {name:"WORD1", path:".../pic1.jpg"},
        {name:"WORD2", path:".../pic2.jpg"},
        {name:"WORD3", path:".../pic3.jpg"},
            ]


$(function(){
$(document).keypress(function(e){
    if ($(e.target).is('input, textarea')) {
        return;
    };
    if (e.which === 97 || e.which === 108) {
        if(Math.random() < 0.5) {
            var new_word = stim[Math.floor((Math.random()*stim.length)+1)].name;
            $("#abc").delay(1000).text(new_word);
        } else {
            var new_img =  stim[Math.floor((Math.random()*stim.length)+1)].path;
            $("#abc").delay(1000).empty();
            var prox_img = $('<img id="abcimg" height="300px" width="300px">');
            prox_img.attr('src', new_img);
            prox_img.appendTo('#abc');
        }
    };
});
});

Answer 1

根据延迟文件：https://api.jquery.com/delay/

.delay（）方法最适合在排队的jQuery之间延迟的效果。

你应该使用setTimeout，因为它也允许你取消它。这对于您需要最大超时非常重要。

所以，首先我会破坏你的功能。你可以有一个处理显示的函数，当超时或按下某个键时会调用它。

$(function(){
  var to = 0; //this is used to clear your timeout when the user clicks a button
  function showNext() {
    if(Math.random() < 0.5) {
      var new_word = stim[Math.floor((Math.random()*stim.length)+1)].name;
      $("#abc").delay(1000).text(new_word);
    } else {
      var new_img =  stim[Math.floor((Math.random()*stim.length)+1)].path;
      $("#abc").delay(1000).empty();
      var prox_img = $('<img id="abcimg" height="300px" width="300px">');
      prox_img.attr('src', new_img);
      prox_img.appendTo('#abc');
    }
  to = setTimeout(function(){showNext()}, 2000);
}
$(document).keypress(function(e){
    if ($(e.target).is('input, textarea')) {
        return;
    };
    clearTimeout(to);
    if (e.which === 97 || e.which === 108) {
      setTimeout(function(){showNext();}, 1000);  
    }
});
});

在按键事件之间插入延迟并设置显示时间

1 个答案: