关于重构 jQuery 持续时间计算的建议

Question

总的来说，我对 jQuery 和 javascript 比较陌生；我知识渊博，可以编写基本脚本，但我可以通过一些帮助来优化我的一些代码，这些代码对我来说似乎效率不高，但我不知道改变它的最佳方法。

我有两个 input type='time' 表单域和一个隐藏的表单域，用于保存两个域之间的差异。

这是我的代码：

function timeDifference(field1, field2) {
    var field1val = $(field1).val();
    var field2val = $(field2).val();

    if ((field1val !== '--:--') && (field2val !== '--:--')) {           
        var hours = field1val.split(':')[0] - field2val.split(':')[0];
        var minutes = field1val.split(':')[1] - field2val.split(':')[1];

        minutes = minutes.toString().length<2?'0'+minutes:minutes;
        if(minutes<0){ 
        hours--;
        minutes = 60 + minutes;
        }
        hours = hours.toString().length<2?'0'+hours:hours;

        var difference = hours + ':' + minutes;
        return difference;          
    } else return false;
};

    $('#assessmentHeaderStartTime, #assessmentHeaderEndTime').change(function() {
    var duration = timeDifference('#assessmentHeaderStartTime','#assessmentHeaderEndTime');
    $('#assessmentHeaderDuration').val(duration);
    });

我怀疑 .change() 是更新持续时间值的最佳方法，但我不确定最佳解决方案是什么。我知道并非所有浏览器都支持 input type='time' 但目前 Chrome 和 Safari 是我们的主要关注点，它们都支持它。

我考虑过可能使用 .keyup() 仅在用户完成输入时间后计算持续时间，但 Chrome 和 Safari 都提供了单击箭头以增加/减少时间的选项，因此您可以在几种方法。另外，我知道这将用于平板电脑，但我不确定他们用来选择时间的时间刻度盘是否算作点击或按键。

每次进行更改时调用函数似乎效率低下，例如，单击并按住按钮将分钟计数器从 01 增加到 59，并让它在其间的每个间隔调用函数作为一部分正常使用行为。

我不知道这个问题的最佳解决方案是什么。有人有什么建议吗？

Answer 1

您确定如果单击向上箭头会调用change 事件吗？从我跑的快速测试来看，它不是。

如果更改事件触发过多，我将建议使用onBlur，但看起来您拥有的代码将完全按照您的意愿行事。有关onBlur 和onChange 之间区别的更多详细信息，请参阅this 问题。