1

我创建了一个简单的网页，它基于两个脚本具有一些效果。第一个是旋转 360 全景图，另一个是滚动到顶部 div。这两个脚本都使用 SetInterval 并以 50 毫秒的间隔运行。该页面在 IE 和 Firefox 中似乎可以高效运行，但在 Chrome 中会出现问题，即在 chrome 中 CPU 使用率很高，接近 48%！！！！

请帮忙。

编码：

全景图.js

var pant=setInterval(function(){panorama()},70);
function panorama()
{
var panx=document.getElementById("uno").style.left;
panx=parseInt(panx);panx-=1;
if(panx==-1100)
{
panx=0;
}
panx=panx.toString();panx=panx+"px";
document.getElementById("uno").style.left=panx;
document.getElementById("dos").style.left=panx;
}

^ 它适用于 2 张图像。

scroller.js

window.onscroll = scrdisp;
function scrdisp()
{
var x=window.pageYOffset;
if(x>=350)
{
document.getElementById("scrolltop").style.display="block";
}
else
{
document.getElementById("scrolltop").style.display="none";
}
}
var t;
function scroll()
{
t=setInterval(function(){scr()},50);
}
function scr()
{
var h=window.pageYOffset;
if(h<=0)
{
clearInterval(t);
}
window.scrollTo(0,h-100);
}
4

2 回答 2

2

检查显示滚动顶部元素 1000 毫秒就足够了。

function scroll() {
    t=setInterval(function(){scr()},1000);
}

你可以像这样提高性能：

var pant=setInterval(panorama,70);
var unoStyle = document.getElementById("uno").style;
var dosStyle = document.getElementById("dos").style;
function panorama() {
    var panx= unoStyle.left;
    panx=parseInt(panx);
    panx-=1;
    if(panx==-1100) {
        panx=0;
    }
    panx=panx+"px";
    unoStyle.left=panx;
    dosStyle.left=panx;
}
于 2013-04-14T08:27:23.343 回答
0

唯一可能导致不稳定的因素是：

  • 在全局范围内命名函数
  • 尤其是scroll用作可以在其他地方调用的函数名，但期望window.scroll
于 2013-04-14T08:15:46.310 回答