为什么这个javascript代码制作浏览器会占用50%的CPU和如此多的内存？

Question

我有这个横幅旋转码:

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.

在上面的代码中是否有任何理由？

谢谢

Answer 1

使用setTimeout()而不是在setInterval()这里,像这样:

setTimeout(cycle, 8000);

随着setInterval()你每次排队越来越多的函数堆栈,而不是在8秒后调用它,我们排队另一个间隔计时器每8秒运行一次,所以你得到这个:

•   8秒:1次跑
• 16秒:2次跑
• 24秒:4次跑
• 32秒:8次跑
• ......哦,哦

随着setTimeout()你会得到一个刚运行时,计时器停止,而不是额外的每8秒运行.

要清楚,这种情况发生的原因是你每次运行它都会调用它,正常的一次性使用这不会是一个问题,没有什么本身就是邪恶的setInterval().