Question

我最近进入了一些更高级的网页设计，所以我现在正在开发一个互动网站。我使用setInterval来执行涉及首页动画，淡入/淡出过渡等所有功能。我使用普通的javascript，因为我不喜欢使用jQuery并尝试尽可能地避免它。它在桌面Web浏览器上运行得非常好，只有很少的bug。 Firefox和Chrome工作正常。但是移动浏览器存在一些问题。

到目前为止，我只在iPad Mini上尝试了Safari IOS8，并且在setInterval似乎停止运行的情况下出现了奇怪的问题。正如我之前所说，我有多个setInterval线程在运行，其中一个正在运行一部电影而另一个正在运行一个简单的横幅淡入/淡出。有些是通过点击事件等触发的。

电影就是问题所在。我使用一个名为i2的计数器变量作为间隔的每一帧的迭代器。我检查这个计数器的某些位置是为了触发事件，AKA在短片中的新场景。在电影结束时，我将i2变量重置为0，以便电影重新启动。在移动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;
            }
        }
    }
}

我删除了一些代码以缩短代码。正如你所看到的，大多数是一个简单的if树，它可以检查它所在的场景。重要的部分是最后一棵树。在最后，我将i2设置为0。

我不确定我的代码是否与该问题有任何关联，但有其他人在移动浏览器上遇到过Javascript解释问题和不一致的问题，你是如何解决它的？

编辑注意：我从一个不同的Javascript文件调用该函数，所以即使这里没有显示setInterval它也存在!!

使用Javascript解决移动浏览器中的错误

0 个答案: