javascript - 测量实际事件时间

Question

fiddle :http://jsfiddle.net/qfn04xzj/

var a, b;
$('input:not([type=password]), textarea, select').on('focus', function(event) {
    a = performance.now();
});
$('input:not([type=password]), textarea, select').on('blur', function(event) {
    b = performance.now();
    $('#console').append( $(this).attr('name') + ' took ' + (b - a) + ' ms.' + "<br/>");
});

... 有效，但它测量的是 focus 和 blur 之间的时间。

有什么方法可以测量实际时间——输入所花费的时间或两次值更改之间的时间？

Answer 1

您应该首先定义实际时间 的含义。如果你指的是第一次和最后一次击键之间的时间，那么下面的代码应该可以工作。每当用户关注输入并监听每次击键时，它都会创建一个对象，记录第一次和最后一次击键。当输入模糊时，它会计算两者之间的差异。

当然，用户仍然可以输入几个字符，去喝杯咖啡，然后返回输入其他字符，这将导致事件时间非常长。没有办法知道用户实际上花了多少时间盯着输入。但是，您可以定义一个“超时”或不活动时间段，在此之后您假定用户处于空闲状态。

Fiddle

$('input:not([type=password]), textarea, select').on('focus', function() {
    new EditingSession($(this));
});

/** 
 * Represents the period of time during which the user is focused on
 * the input.
 */
function EditingSession(input){

    var firstKeydownTime = null;
    var lastKeydownTime = null;
    var sessionId = makeRandomId();

    input.on("keydown." + sessionId, function(){
        // User typed something
        var time = performance.now();
        lastKeydownTime = time;
        if(firstKeydownTime === null){
            firstKeydownTime = time;
        }
    });

    input.on("blur." + sessionId, function(){
        // Editing session finished.

        // Detach all handlers
        input.off("." + sessionId);

        // Print time between first and last keydown
        var time;
        if(firstKeydownTime === null){
            time = 0;
        } else {
            time = lastKeydownTime - firstKeydownTime;
        }
        $('#console').append(input.attr('name') + ' took ' + time + ' ms.' + "<br/>");
    });

}

// Borrowed from http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript    
function makeRandomId() {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i < 5; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}