1、前言
下午, 自测的过程发现个问题，困扰了我很久，故有了此文章。
2、问题
需求背景: 有个view内容区依赖接口返回的展示时间段、跟当前时间做对比，若在展示时间内则展示，否则不展示～
一开始设想如下:
// 为最简化代码、将接口返回的展示时间段先写死
展示开始时间: startTime; 展示结束时间: endTime; 当前时间nowTime
const startTime = '2021-12-07 00:00:00'
const endTime = '2021-12-17 00:00:00'
if(startTime < nowTime && nowTime < endTime) {
// 展示view内容区
}
方案定了, 那就开始撸码:
// 判定是否在展示时间内
const compareFn = (startTime, endTime) => {
if(startTime && endTime){
let start = new Date(startTime).getTime()
let end = new Date(endTime).getTime()
let curr = new Date().getTime()
return curr >= start && curr <= end
}
return false
}
const isShow = compareFn(startTime, endTime)
开心, 一口气实现&&在微信开发者工具上调试是有触发view的展示的, 以为事情就这样结束了～
然而事情不妙,问题来了: 同份代码在ios设备上没法触发view内容区。
排查方向:
-是否css导致view内容区看不到(因为该view内容区是fix布局, 担心有样式在真机兼容性问题);
-手机端代码因一些意外原因未更新(之前出现过开发者工具编译后的代码还是未更新、估计是手误叭);
-前后行代码setData()是否未生效;
以上排查中发现, 好像setData()拿到的值在真机上是false, 跟开发者工具表现不一致, 那就一步步调试看看.
最后发现start变量的值在ios上console.log的值是NaN, 瞬间有眉目了!!!!!!
new Date(date).getTime()方法: 获取的时间戳, 在ios手机上值是NaN, 在微信开发者工具or浏览器就没问题。
既然知道问题在哪儿了, 请看下方的解决方案~
3、解决方案
-通过正则将'-'改为'/'(ios系统不认得'-'却认得'/')
new Date(date.replace(/-/g,'/')).getTime()
针对本次问题、完整的解决方案如下
const compareFn = (startTime, endTime) => {
if(startTime && endTime){
let start = new Date(startTime.replace(/-/g,'/')).getTime()
let end = new Date(endTime.replace(/-/g,'/')).getTime()
// 这里需要特别注意的是: new Date().getTime()则不会有兼容性问题
let curr = new Date().getTime()
return curr >= start && curr <= end
}
return false
}
const isShow = compareFn(startTime, endTime)
