JS setInterval 在IOS系统中不正常? 10C

写了一个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一样.

js

5个回答

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

 <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>
ldwformat
ldwformat 靠,刚才一实验居然有Bug,太TM草率了~题主如果要用的话麻烦自己修正下
5 年多之前 回复

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

ldwformat
ldwformat 回复qq_25185349: 呃,我解释的这么不清楚么。就是哈,你向一个函数传入的参数showhp和showhp()是完全不同的两个东西。如果你之前定义了function showhp(){} 那么在任何时候你再次引用showhp的时候,你引用的是这个函数或者方法的指针(就是你告诉setInterval函数说:你,去给爷找一个叫showhp的,让他起来干活,100毫秒找他一次,来,这是他家地址),但是如果你传入的是showhp(),其实你是要表达这个意思(哎,你,setInterval,去找一个叫showup的,让他按照自己的规则运动一下,你把他运动的结果带回来,然后每100毫秒给我宣读一遍他运行的结果)。所以如果你需要把函数本身作为参数时候,通常都需要传递函数的指针,就是他们家地址,而不是去叫函数自己运动一遍你需要他运动的副产品。这么说能理解?
5 年多之前 回复
qq_25185349
qq_25185349 不明觉厉.关键是ios运行不了.不用jquery之类,也得这么干.
5 年多之前 回复

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

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

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

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

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐