zoukankan      html  css  js  c++  java
  • 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时间,两个的差值如果大于延迟时间就直接执行回调

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

  • 相关阅读:
    [HBase] HBase 安装&&小测试
    [tcl] hello tcl
    [php] 数据结构&算法(PHP描述) 快速排序 quick sort
    [php] 数据结构&算法(PHP描述) 查找&&二分法查找
    Linux 系统信息监控统计命令小结
    fuser 命令小结
    hdu 1142 A Walk Through the Forest (最短路+dfs)
    hdu 1688 Sightseeing (次短路及次短路数)&&pku3255 Roadblocks &&3191 How Many Paths Are There
    hdu 3790 最短路径问题
    hdu 2415 Bribing FIPA(树形DP)
  • 原文地址:https://www.cnblogs.com/jesse007/p/5738174.html
Copyright © 2011-2022 走看看