更新由函数创建的对象中的Javascript变量setInterval

Question

我试图在javascript中创建一个停止和开始定时器函数，用于在jQuery中记录$('input')的。focus()和。blur()之间的时间。

这是我目前为止写的:

function startTimer() {
    _id = guid()
    time = 0
    timer_id = setInterval(function () {
        time++;
    }, 100);
    timer = {
        _id: _id,
        time: time,
        timer_id: timer_id,
    }
    return timer;
}
function stopTimer(timer) {
    var stop = timer.time
    clearInterval(timer.timer_id);
    return stop;
}
// usage
fieldTimes = {}

// on focus of field
$("input").on('focus', function (e) {
    element = e.target;
    var timer = startTimer();
    // on unfocus of field
    $(element).blur(function () {
        var time = stopTimer(timer);
        var field = e.target.id
        if (fieldTimes.hasOwnProperty(field)) {
            fieldTimes[field] += time;
        } else {
            fieldTimes[field] = time;
        }
    })
});

小提琴:http://jsfiddle.net/andrewblaney/Ltfvmaec/

问题是startTimer

Answer 1

当你说:

timer = {
    _id: _id,
    time: time,
    timer_id: timer_id,
}

右边的所有值都求值。因此，timer.time设为time在该时间点的整数值。不是设置为对time变量的引用。

一种修复方法是在间隔中简单地引用timer.time:

timer_id = setInterval(function () {
    timer.time++;
}, 100);

编辑:此外，您需要取消绑定您正在附加的.blur事件:

$(element).on("blur.timer", function () {
    // ... code here ...
    $(element).off("blur.timer");
})

更新小提琴

Answer 2

你只是增加定时器变量而不是时间对象。把你的

改成

timer_id = setInterval(function () {
    timer.time = time++; 
}, 100);