我有这个横幅旋转器代码:
function ban_rot() {
//First preload images
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0] = "../Graphics/adv/1.gif"
images[1] = "../Graphics/adv/2.jpg"
// start preloading
for (i = 0; i <= images.length; i++) {
imageObj.src = images[i];
}
///////////////////////
var links = new Array("http://www.link1.com", "http://www.link2.se");
var alts = new Array("alt1", "alt2");
var titles = new Array("title1", "title2");
var counter = 0;
var banner_div = document.getElementById("ban_rot");
cycle();
function cycle() {
if (counter == links.length) {
counter = 0;
}
else if (counter < links.length) {
banner_div.innerHTML = '<a href=\"' + links[counter] + '\"><img src=\"' + images[counter] + '\" border=\"1px\" style=\"border-color:#000;\" alt=\"' + alts[counter] + '\" title=\"' + titles[counter] + '\"></a>';
//increase counter
counter++;
}
setInterval(cycle, 8000);
} //end cycle function
} //end ban_rot function
使用此代码,在 Firefox 或 Chrome 中运行大约 2-3 分钟后,内存增加并且 CPU 占用率达到 50% 左右。 计算机变得迟钝,我不得不终止 Chrome 和 FF。
上面这段代码有什么原因吗?
谢谢
最佳答案
使用setTimeout()
而不是 setInterval()
在这里,像这样:
setTimeout(cycle, 8000);
与 setInterval()
你每次都在排队越来越多的函数堆栈,而不是在 8 秒后调用一次,我们在排队另一个间隔计时器每 8 秒运行一次,所以你得到这个:
- 8 秒:1 次运行
- 16 秒:2 次运行
- 24 秒:4 次运行
- 32 秒:8 次运行
- ...呃哦
与 setTimeout()
计时器一到,您将只运行一次,而不是每 8 秒额外运行一次。
需要明确的是,发生这种情况是因为您每次运行时都会调用它,正常的一次性使用不会有问题,setInterval()
本身并没有什么不好的地方| .
关于javascript - 为什么这个 javascript 代码使浏览器占用 50% 的 CPU 和这么多内存?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4063154/