bug记录-setTimeout、setInterval之IOS7

时间:2023-03-09 08:32:11
bug记录-setTimeout、setInterval之IOS7

本篇文章主要讲查找并分析bug的思路,相关的函数不是本文的重点。

众所周知,setTimeout和setInterval是用来做延迟调用以及周期性调用的方法,他们支持的参数都差不多。

setTimeout/setInterval的第一个参数为回调函数,可以是一个方法名,也可以是一个匿名函数。第二个参数就是延迟执行的时间,单位ms。

我们可以这样用:

setTimeout(fn,1000);
function fn(){};
//还可以这样用
setTimeout(function(){},1000);
//interval一样

我们demo上设置的延迟时间是1000ms,由于js是单线程的,实际的延迟时间可能会比 1000ms长,但是只要进程空闲时就会立即执行。(这也是为什么建议使用setTimeout来代替setInterval的原因)

好了,方法都解释的差不多了,直插主题吧。

一个简单的需求,当用户输入错误时显示一个tips,并在x秒后隐藏,超级简单对不对,开搞。

function hide(){
//do hide
}
setTimeout(hide,5000)//在5000ms后做hide操作

uc,qq,chrome,什么国产手机自带浏览器都跑一遍吧,没任何问题,只有ios7的safari,如果一直滑动的话,不会执行延迟操作,只有停止滑动才会执行,而且是立即执行(大概延迟800ms左右)

比较棘手啊,这种情况有点像在有些浏览器上滑动时,gif动图会停止运动(有遇到过页面滑动,js动画都停止的),猜测会不会是一种优化手段呢,于是

var count =0,startTime=new Date().getTime(),endTime;
timer=setTimeout(function(){
//endTime = new Date().getTime();
var a = document.createElement("p");
a.innerText = endTime-startTime;
document.getElementById("demo").appendChild(a)
alert("ok"); },2000)
window.addEventListener("touchend",function(){
endTime = new Date().getTime();
count+=1;
var a = document.createElement("p");
a.innerText = startTime+"---"+endTime;
document.getElementById("demo").appendChild(a)
},false)

开始监听的是touchmove事件,证明滑动不会影响除延时函数以外的其他js执行。

监听touchend事件,滑动结束后并不是2000ms执行回调,测试大概是800ms左右。

根据上面的测试,我们能大概的来猜测下,ios7中safari做了滑动优化,在滑动的过程中阻止延迟事件的执行,在滑动结束后再执行。

解决方法

其实这种情况,没什么好解决的(不要打我),因为ios7的确是很老的系统了。但是我们为了精益求精还是得研究下的。

1.由于是滑动造成的,那我们直接干掉滑动吧,在hide以后再开启(在tips消失之前滑动不了页面)

2.做一个兼容,如果用户滑动了,记录滑动的开始时间和move时间,两个的差值如果大于延迟时间就直接执行回调

时间仓促,写的有点匆忙(今天星期五啊。。),如果有什么遗漏或者错误的地方欢迎指出