延迟计算OnChange事件

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

<!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>

来源

2017-10-13 Alan Mac Cormack

使用，而不是change事件input事件：

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

在change事件的MDN文档解释的区别：

的change事件被解雇<input>，<select>和<textarea>元素，当元素的值由用户。与input事件不同，change事件不一定会针对元素值的每次更改触发。

该关键字是承诺。数值为承诺的时刻可以取决于实施。对于标准文本input元素，这发生在元素失去焦点时。但在这种特殊情况下（time型号为input），Chrome会在使用上/下箭头后触发change事件，但时间可能会有所不同。有时它几乎是直接的，有时会有延迟。

input事件更适合于跟踪每个变化，独立于用户的操作方式 - 通过键盘，上下文菜单，拖放操作，按钮集成在小部件中......），并立即触发。

来源

2017-10-13 10:02:53 trincot

令人惊叹的解决方案。非常感谢你。你能解释一下这两者之间的区别吗？ –

我在答案中加了一些解释。 – trincot

延迟计算OnChange事件

回答

相关问题