市场故障打破宁静
一个三级的市场故障打破了宁静的下午。
“开发快看!一个印度客户在快速配置的第一个页面配置完成后,点击‘NEXT’没有反应!”
“不管是切换火狐还是谷歌浏览器,现象都是一致的!就算是升级新版本还是没有反应!赶紧远程客户环境看看什么情况!”
开始排查
好吧,让我们来看看客户环境出了什么问题?让我打开控制台看看!
嗯?公司的UI组件报错了?报错的原因是undefined (setting 'selected')
,那必然是下拉框出了问题,对比下页面看看有没有什么区别?
很明显,客户的环境在渲染的时候没有自动选择对应的时区,那这是为什么呢?打开控制台调试看看!
啊哈,错误的原因很明显了,new Date().getTimezoneOffset()
拿到的值是330,经过一通计算后就变成了非整数,而这个数被当作了数组的索引!
getTimezoneOffset 是干啥的?
new Date().getTimezoneOffset()
方法返回协调世界时(UTC)相对于当前时区的时间差值,单位为分钟。
时区偏差(time-zone offset)表示协调世界时(UTC)与本地时区之间的差值,单位为分钟。需要注意的是如果本地时区后于协调世界时,则该差值为正值,如果先于协调世界时则为负值。例如你所在时区为 UTC+10(澳大利亚东部标准时间),将会返回 -600。对于同一个时区,夏令时(Daylight Saving Time)将会改变这个值。
根据代码分析可以判断,这地方是想通过浏览器获取客户所在的时区,然后帮用户自动选择一个选项。
但是,为啥客户所在的时区拿到的值计算后不是整数?!
吃了地理知识的亏
我赶忙去搜索了下印度的时区,结果颠覆了我对于时区的认知。
大大的UTC+5:30狠狠地抽打了浅薄的地理知识。
我们可以通过这个网站来看看都有哪些国家的时区是如此的奇葩👉各国时区
👆图中标着斜线的地区,他们的时区都不是整时的,会有分钟的偏移!!印度也赫然在列!!
真的是理科生吃了文科的亏啊~
修订方案
当然修订方案也很简单,设备本来也不支持你去配置这种奇奇怪怪的时区,我们web只要保证时区能正常渲染就行了,因此,四舍五入!
//通过浏览器知道当前所在的时区,然后再加12得到zoneArr索引
var currentZoneIndex = Math.round((- new Date().getTimezoneOffset()) / 60 + 12);
self.zoneCombox.resetSelected(zoneArr[currentZoneIndex]);
通过Math.round
来让获取的数字是整数吧!
太长了不想读?
电脑时区不是整点时区时,浏览器通过 new Date().getTimezoneOffset()
获取的电脑时区计算后不是整数,而该非整数被用作数组的索引,导致快速配置页面的时区无法自动选中默认值,页面报错卡死无法执行后续操作。