我做了简单的jQuery插件这一点。它能够告诉你什么是总编辑时间(仅当实际使用编辑时),首先编辑任何输入元素的时间和最后编辑时间。您还可以获取所有编辑时间。
(function() {
var getTime = function() { return performance.now(); };
function MeasureTime() {
this.editTimes = [];
this.currentEdit = null;
this.lastEdit = {start:0, last: 0};
this.firstEdit = 0;
}
MeasureTime.prototype = {
setFirst: function() {
this.firstEdit = getTime();
this.setFirst = new Function();
},
startEdit: function (val) {
this.setFirst();
if(this.currentEdit == null) {
this.currentEdit = {start: getTime(), last: getTime(), value: val};
this.editTimes.push(0);
} else {
this.edit(val);
}
},
edit: function (val) {
if(this.currentEdit == null)
this.startEdit(val);
else {
var current = this.currentEdit;
if(current.value == val)
return;
current.last = getTime();
this.editTimes.pop();
this.editTimes.push(current.last - current.start);
}
},
stopEdit: function() {
if(this.currentEdit != null) {
this.lastEdit = this.currentEdit;
this.currentEdit = null;
}
},
getEvent: function() {
return new TimeMeasuredEvent(this.editTimes, this.currentEdit || this.lastEdit, this.firstEdit);
}
};
function TimeMeasuredEvent (all, current, first) {
this.all = all.slice(0);
this.start = current.start;
this.last = current.last;
this.first = first;
}
TimeMeasuredEvent.prototype = {
current: function() {
return this.all[this.all.length-1];
},
total: function() {
var sum = 0, a = this.all, l = a.length, i = -1;
while(++i<l)
sum+=a[i];
return sum;
}
};
function EnsureMeasureTime() {
if (typeof(this.measureTimeData) === "undefined") {
var mtd = this.measureTimeData = new MeasureTime();
$(this).on('focus', function() {
mtd.startEdit(this.value);
$(this).on('input.measuretime select.measuretime cut.measuretime copy.measuretime paste.measuretime', function() {
mtd.edit(this.value);
$(this).trigger('timeMeasured', [mtd.getEvent()]);
});
$(this).on('blur', function() {
mtd.stopEdit();
$(this).trigger('timeMeasured', [mtd.getEvent()]);
$(this).off('measuretime');
});
});
}
}
$.fn.measureTime = function() {
$(this).each(EnsureMeasureTime);
return this;
};
})();
使用范例(fiddle):
var inputs = $('input, select');
inputs.measureTime();
var all = {};
inputs.on('timeMeasured', function (ev, data) {
console.log(ev, data);
all[ev.target.name] = data.total();
console.log("First edit time: " + data.first);
console.log("Last edit time: " + data.last);
console.log("All edits durations: " + data.all.join(", "));
console.log("Current edit duration: " + data.current());
console.log("Total edit duration: " + data.total());
var s = "";
for(var n in all) {
s+= n + ": " + all[n]+"\n";
}
$("#times").text(s);
});
您还可以通过访问element.measureTimeData
原料MeasureTime对象来获取编辑倍。
我想你可以使用这个[问题](http://stackoverflow.com/questions/6626044/how-to-monitor-time-it-takes-a-user-to-enter-data-into-a -input-text-field-in-htm?answertab = active#tab-top) – FiN 2015-06-23 07:18:42
if(times in times)是什么时间?它在控制台中未定义。 – AngularHarsh 2015-06-23 07:27:27
请修正片段 – 2015-06-23 07:37:32