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时间，两个的差值如果大于延迟时间就直接执行回调

 

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