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

Advice on refactoring jQuery time duration calculation

本文关键字：计算 持续时间 jQuery 于重构 重构      更新时间：2023-09-26

一般来说，我对jQuery和javascript相对陌生；我有足够的知识来编写基本的脚本，但我可以在一些帮助下优化我的一些代码，这对我来说似乎并不有效，但我不知道修改它的最佳方法。

我有两个输入类型为"时间"的表单字段和一个隐藏的表单字段，用于保存两个字段之间的差异。

这是我的代码：

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（）是否是更新持续时间值的最佳方法，但我不确定什么是最佳解决方案。我知道不是所有浏览器都支持inputtype='time'，但目前Chrome&Safari是我们的主要关注点，两者都支持它。

我曾考虑过使用.keyup（）只计算用户在一段时间内完成键入后的持续时间，但Chrome&Safari都提供了单击箭头来增加/减少时间的选项，因此您可以通过几种方式输入数据。另外，我知道这将在平板电脑上使用，我不确定他们用来选择时间的时间刻度盘是算作点击还是按键。

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

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

您确定如果单击向上箭头会调用change事件吗？从我进行的一次快速测试来看，情况并非如此。

如果更改事件触发过多，我建议使用onBlur，但看起来您所拥有的代码将完全按照您想要的方式运行。有关onBlur和onChange之间差异的更多详细信息，请参阅此问题。

相关文章：