延迟计算 OnChange 事件

Question

延迟计算 OnChange 事件

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

tri*_*cot 5

使用input事件代替change事件：

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

Run Code Online (Sandbox Code Playgroud)

change事件的 MDN 文档解释了不同之处：

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

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

该input事件更适合跟踪每一个更改，独立于用户如何进行更改——通过键盘、上下文菜单、拖放、集成在小部件内的按钮......），并且它会立即触发.

归档时间：	8 年，8 月前
查看次数：	1981 次
最近记录：	8 年，8 月前