Question

我正在尝试计算DECIMALS中两个数字之间的差异。问题是它需要大约2-3个sencods，这是一个问题，因为输入是时间，并且用户可以非常快速地发射事件并且它似乎以某种方式崩溃。这可能来自不是小数点吗？昏迷后我只需要2位数。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing</title>
</head>
<body>

<input type="date" name="" id="">
<input type="time" step="300" name="" id="startTime" onkeydown="return false" />
<input type="time" step="300" name="" id="endTime" onkeydown="return false" />
<input type="text" id="totalHours">
</body>


<script>

document.querySelector("#startTime").onchange = function (e) {
}

document.querySelector("#endTime").onchange = function (e) {
    timeDiff();
}

function timeDiff() {
    var start = document.querySelector("#startTime").value;
    var end = document.querySelector("#endTime").value;


    var startSplit = start.split(":");
    var startHsToMinutes = startSplit[0] * 60;
    var startTotalMinutes = parseInt(startSplit[1]) + startHsToMinutes;

    var endSplit = end.split(":");
    var endHsToMinutes = (endSplit[0] * 60);
    var endTotalMinutes = parseInt(endSplit[1]) + endHsToMinutes;

    var totalHours = endTotalMinutes - startTotalMinutes;
    document.querySelector("#totalHours").value = totalHours / 60;

}
</script>
</html>

Answer 1

使用input事件代替change事件：

document.querySelector("#endTime").oninput = function (e) {
    timeDiff();
}

change事件的MDN文档解释了差异：

当用户提交对元素值的更改时，会为change，<input>和<select>元素触发<textarea>事件。与input事件不同，change事件不一定会因元素值的每次更改而触发。

关键字是已提交。值提交的时刻可能依赖于实现。对于标准文本input元素，当元素失去焦点时会发生这种情况。但在此特定情况下（time类型input）Chrome会在使用向上/向下箭头后触发change事件，但时间可能会有所不同。有时它几乎是即时的，有时会有延迟。

input事件更适合跟踪每个更改，而不管用户如何制作 - 通过键盘，上下文菜单，拖放，按钮集成在窗口小部件中。 ..），它会立即触发。

延迟计算OnChange事件

1 个答案: