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時間，兩個的差值若是大於延遲時間就直接執行回調

 

時間倉促，寫的有點匆忙（今天星期五啊。。），若是有什麼遺漏或者錯誤的地方歡迎指出