重构jQuery时间计算的建议

我对jQuery和JavaScript一般来说比较新;我有足够的知识来编写基本脚本，但我可以帮助优化我的一些代码，这对我来说似乎并不高效，但我不知道改变它的最佳方式。重构jQuery时间计算的建议

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

这里是我的代码：

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（）是去更新时间价值的最佳方式，但我不知道什么是最佳的解决方案。我知道所有浏览器都不支持输入类型='时间'，但现在Chrome浏览器是我们的主要焦点，它们都支持它。

我曾考虑过使用.keyup（）来计算一次用户输入完毕后的持续时间，但Chrome浏览器都提供了单击箭头来增加/减少时间的选项，以便您可以输入数据几种方法。另外，我知道这将用于平板电脑，我不确定他们用来选择时间的时间拨号计为点击或按键。

每当用户可以点击并按住按钮以将分钟计数器从01增加到59并在每个间隔时间内调用函数时，调用该函数似乎效率不高正常使用行为的一部分。

我不知道最佳解决方案是什么。有没有人有什么建议？

来源

2013-07-29 Roy

您确定如果您点击向上箭头change事件被调用？从我运行的快速测试来看，它不是。

如果更改事件触发得太多，我会建议使用onBlur，但它看起来像您拥有的代码将按您的意愿行事。有关onBlur和onChange之间的差异的更多详细信息，请参阅this问题。

来源

2013-07-31 19:12:09 rosscj2533

是的，我相信它会改变向上的箭头。所有3个字段位于同一页面上，您可以在单击箭头更改另外两个时间字段时看到持续时间字段更新。感谢您的链接，但正如您所说，它看起来像我现在得到的代码最符合我希望它的行为。 – Roy

重构jQuery时间计算的建议

回答

相关问题