JS setInterval 在IOS系统中不正常?

写了一个js,利用setInterval将几副图片淡入淡出,在台式机和android设备上好好的,在IOS
系统中整个网页都不能正常运作.输入框几乎要等几分钟才能输入一个字符.
开始用的是iphone5s,ipadmini2,以为是设备问题,换iphone6+一样?
为毛哇?写了一个js,利用setInterval将几副图片淡入淡出,在台式机和android设备上好好的,在IOS
系统中整个网页都不能正常运作.输入框几乎要等几分钟才能输入一个字符.
开始用的是iphone5s,ipadmini2,以为是设备问题,换iphone6+一样?
为毛哇?

 var MyInterval=setInterval("showhp()",100);
....
function showhp(){
    (FadeOut)?aopa=aopa-0.05:aopa=aopa+0.05;
    if (aopa<=0||aopa>=1){
        FadeOut=!FadeOut;
        (FadeOut)?aopa=aopa-0.05:aopa=aopa+0.05;
        bid=bid+1;
        if( bid>3){bid=1};
        document.getElementById("hbr1").src="./pics/homebanr"+bid+".jpg"
        isg+=1;
        isg==3?isg=0:isg=isg;
        document.getElementById("hbrtxttxt").innerHTML=slogan[isg];
        };
    document.getElementById("hbr1").style.opacity=aopa;}

以为是时间间隔设成100ms太大,改成1000ms一样.

只看了第一行 var MyInterval=setInterval("showhp()",100); 就觉得这个脚本如果正常执行起来到是挺奇怪的。setInterval的第一个参数是一个函数回调,其实就是个指针。你现在传给他一个函数操作的返回值,而且还是null,你让它该怎么操作咧?它只能运行一下你的函数,然后默默的混吃等死。然后每秒要运行十次null函数,这不把浏览器弄得死去活来的么~还有,楼主这么写淡入淡出我还真不知道效果怎么样。楼主学的别太着急了,一步一步来比较好。

你用Safari这个地址http://www.apple.com/cn/safari/ 试试,ios估计也是这个浏览器.

我不知道问题实际需要的操作是怎么样的,就随手写了一个淡入淡出分离的函数。不知道能不能帮上忙,还有我个人觉得动画效果与更换图片的操作一定要分离开来,不然代码的维护性应该会比较差。

 <img src="medium.jpg" id="testImg" alt="Test Image">
        <button id="toggleBtn">FadeOut/FadeIn</button>

        <script>
            window.onload = function(){

                document.getElementById("toggleBtn").onclick = function(){
                    var img = document.getElementById("testImg");
                    fadeToggle(img, 1200);
                }

                function fadeToggle(img, during){
                    var opacity = img.style.opacity;
                    if ( opacity != 0 && opacity != 1) return;

                    var isFadeIn = (opacity == 0);
                    var totalFrame = 60 * during / 1000;
                    var stepLength = 1 / totalFrame;
                    var currentFrame = 0;

                    function fadeToggleImplement(){
                        img.style.opacity = (isFadeIn) ? stepLength * currentFrame : stepLength * (totalFrame - currentFrame);
                        //console.log(img.style.opacity);
                        currentFrame++;
                        if (currentFrame <= totalFrame) 
                            handle = setTimeout(fadeToggleImplement, 1000 / 60);                        
                    }

                    fadeToggleImplement();
                }

            }
</script>

It works! 但还是不明白我的那个为何不行?

首先 要证明一下
是这个代码影响了 系统性能吗?

如果是的话
最最影响性能的 就是
document.getElementById("hbr1").src="./pics/homebanr"+bid+".jpg" 这里

要替换代码测试证明
你也可以 在输入框获的焦点的时候 停止这个代码