jquery中两个事件之间的正确时间记录

Question

好的。我整天都在考虑这个问题，可能失去了概述，永远不会想出解决方案。

背景：我的脚本（摘录如下）重复显示“WORD”（快速淡入，变量淡出）并记录出现和按键之间经过的时间。看到这个FIDDLE

但是，我认为我的 t1 和 t2 的放置/计时不完全准确。我想要的是：它应该记录从外观到按键所用的时间，并且 WORD 应该始终显示 1500 毫秒（除非按键中断间隔），所以理论上的最大反应时间是 1499 毫秒.

我怀疑我的变量 randomisi 存在问题，不是吗？我试图考虑到这一点，但有时会得到负面的反应时间。

var isi = [250, 500, 750]; var RT = [];
var showwords = function() {
    var randomisi = isi[Math.floor((Math.random() * isi.length))];

    $("#words").fadeOut(randomisi, function() {
        $("#words").text("WORD").fadeIn(10);
    });

    t1 = (new Date()).getTime();
};


INT = setInterval(showwords, 1500);

$(document).keypress(function(e) {
    clearInterval(INT);
    var t2 = (new Date()).getTime();
    reac = t2 - t1;RT.push(reac); $("#RT").val(RT);
    t1 = t2;
    INT = setInterval(showwords, 1500);
});

现在太复杂的时间问题有人可以为我解释一下吗？

Answer 1

您的脚本中 off 的三件事之一似乎是这部分

$("#words").fadeOut(randomisi, function() {
    $("#words").text("WORD").fadeIn(10);
});

t1 = (new Date()).getTime();

.fadeOut 实际上并没有阻止脚本，所以 t1 被设置，即使前一个单词正在消失，给你一个大的 RT 值。
用

替换这段代码

$("#words").fadeOut(randomisi, function() {
    $("#words").text("WORD").fadeIn(10, function(){
        t1 = (new Date()).getTime();
    });
});

将解决问题 1。

第二个问题是，即使单词淡出，它也会继续监听 keydown。您可以通过在代码中添加新标志来防止这种情况。

您在 fix1 和 fix2 之后的代码

var isi = [250, 500, 750],
    RT = [],
    listen = false;

var showwords = function () {
    listen = false;
    var randomisi = isi[Math.floor((Math.random() * isi.length))];
    $("#words").fadeOut(randomisi, function () {
        $("#words").text("WORD").fadeIn(10, function () {
            t1 = (new Date()).getTime();
            listen = true;
        });
    });
};

INT = setInterval(showwords, 1500);
$(document).keypress(function (e) {

    if(listen == false) return;

    clearInterval(INT);

    var t2 = (new Date()).getTime();
    reac = t2 - t1;
    RT.push(reac);
    $("#RT").val(RT);
    INT = setInterval(showwords, 1500);
});

第三个问题似乎是这个词将出现在1500 - randomisi - 10 毫秒而不是恰好 1500 毫秒。

Answer 2

除了负时钟偏差之外，我能看到的唯一可能导致t2 小于t1 的原因是javascript 实现是多线程的，并且showwords 在按键事件触发时已经在执行，并且@ 987654324@ 在t2 由按键处理程序设置之后，但在计算reac 之前，由showwords 更新。

如果你添加一个锁变量来消除这种可能性，你可以确认或排除这种可能性：

var isi = [250, 500, 750]; var RT = [];
var inShowWords = 0;
var showwords = function() {
    inShowWords = 1;
    var randomisi = isi[Math.floor((Math.random() * isi.length))];

    $("#words").fadeOut(randomisi, function() {
        $("#words").text("WORD").fadeIn(10);
    });

    t1 = (new Date()).getTime();
    inShowWords = 0;
};


INT = setInterval(showwords, 1500);

$(document).keypress(function(e) {
    if (inShowWords == 0) {
        clearInterval(INT);
        var t2 = (new Date()).getTime();
        reac = t2 - t1;RT.push(reac); $("#RT").val(RT);
        t1 = t2;
        INT = setInterval(showwords, 1500);
    } else {
        RT.push('locked'); $("#RT").val(RT);
    }
});