使用Javascript解决移动浏览器上的bug

我最近进入了一些更高级的网页设计，所以我现在正在一个互动网站上工作。我使用

setInterval

执行所有功能，包括头版动画、淡入淡出转换等。我使用纯javascript，因为我不喜欢使用jQuery，并尽量避免使用它。它在桌面web浏览器上运行得非常好，只有很少的bug。Firefox和Chrome运行良好。然而，移动浏览器存在一些问题

到目前为止，我只在iPad Mini上尝试过Safari IOS8，但遇到了一些奇怪的问题，

setInterval

似乎停止了工作。如前所述，我有多个

setInterval

线程正在运行，其中一个正在运行电影，另一个正在运行简单的横幅淡入/淡出。有些是在单击事件等时触发的

电影才是问题所在。我在间隔的每一帧使用一个名为i2的计数器变量作为迭代器。我检查这个计数器在触发事件的特定位置，也就是短片中的新场景。在电影结束时，我将i2变量重置回0，以便电影重新启动。在mobile Safari中，此i2变量将根本不会重置。我不确定为什么，因为我在另一个循环中有一个I变量，可以很好地重置

以下是我的电影代码：

var i2 = 0;
var lastframe;
var scene = 0;
var texts = ['Gwiddle', 'Web', 'Hosting', 'Reliable', 'Safe', 'Simple', 'Fast', 'Educational'];
var vel = 2;
var temp2;
var counter;
function movie() {
    var temp;
    i2 += 1;
    if(i2 > 50 && scene == 0) {
        scene = 1;
        for(var n = 0;n<3;n++) {
            add('p', 'movie', 'null', 'title');
            get('title', 'class');
            current[n].style.left = '0%';
            current[n].style.opacity = 0;
            current[n].style.top = 60 + n * 75 + 'px';
            current[n].innerHTML = texts[n];
            current[n].style.transform = 'rotate(0deg)';
        }
    }
    /*LARGE HUNK OF CODE REMOVED IT's NOT RELEVANT HERE*/
    } else if(scene == 5) {
        if((i2 - lastframe - 1) % 40 == 0) {
            counter += 1;
            get('verylarge', 'id');
            current.innerHTML = texts[counter + 2];
            if(counter == 5) {
                scene = 6;
                lastframe = i2;
            }
        }
        if(temp2 < 1) {
            temp2 += 0.05;
            current.style.opacity = temp2;
        }
    } else if(scene == 6) {
        if(i2 - lastframe > 30) {
            get('verylarge', 'id');
            temp = current.style.opacity;
            current.style.opacity -= 0.02;
            if(current.style.opacity < 0) {
                get('movie', 'id');
                current.innerHTML = '';
                i2 = 0;
                lastframe = 0;
                scene = 0;
                vel = 2;
            }
        }
    }
}

var i2=0；
var lastframe；
var-scene=0；
var text=['Gwiddle'、'Web'、'Hosting'、'Reliable'、'Safe'、'Simple'、'Fast'、'Educational']；
var-vel=2；
var temp2；
var计数器；
功能电影（）{
无功温度；
i2+=1；
如果（i2>50&&scene==0）{
场景=1；
对于（var n=0；不，我设法解决了这个问题。移动浏览器在从零上的数字减到零下的数字时肯定会遇到问题，因为在移动设备上文本的不透明度不会低于零。看看velocity JS，它应该会让你的生活更轻松，但有一个学习曲线。