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

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

  • 相关阅读:
    S1 : 函数
    S1 :数组迭代方法
    S1 : 传递参数
    S1:new操作符
    S1:函数上下文
    S1:对象与JSON
    S1:运算符
    S1:变量
    代码规范的读后自己的感悟
    第三周学习总结
  • 原文地址:https://www.cnblogs.com/jesse007/p/5738174.html
Copyright © 2011-2022 走看看