javascript - 为什么这个 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() 本身并没有什么不好的地方| .