CODEWITHSUNDEEP
javascript
Jairo Filho
Jairo Filho

Reputation: 342

Javascript function works for a while, then freezes the browser

I'm using this JS code to make a banner:

var images = ["../../images/g11.jpg","../../images/g9.jpg","../../images/g10.jpg"];
var titulos = ["title1","title2","title3"];
var resumos = ["ddd","aaa","bbb"];
var noticias = ["190","204","200"];

var total = 3;
var indice = 0;

function rotate() {
    document.getElementById('imageb').src = images[indice];
    document.getElementById('titulob').innerHTML = titulos[indice];
    document.getElementById('resumob').innerHTML = resumos[indice];
    document.getElementById('noticiab').value = noticias[indice];
    indice++;
    if (indice > total - 1) indice = 0;
}

function banner() {
    rotate();
    setTimeout(banner, 5000);
}

It works how expected, but after some loops it freezes the browser. Pretty sure I'm not using setTimeout properly. Any ideas?

Edit:

Working so far:

function rotate(indice) {
    document.getElementById('imageb').src = images[indice];
    document.getElementById('titulob').innerHTML = titulos[indice];
    document.getElementById('resumob').innerHTML = resumos[indice];
    document.getElementById('noticiab').value = noticias[indice];
}

function banner(indice) {
    var f1 = function() { banner(indice); };
    var total = 3;
    rotate(indice);
    indice++;
    if (indice > total - 1) indice = 0;
    setTimeout(f1, 5000);
}

Upvotes: 2

Views: 219

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074208

I'm posting this as a CW because it's a total guess.

Completely FWIW, here's how I'd minimally change that code: Live Copy | Live Source

(function() {
    var entries = [
        {
            img:        "../../images/g11.jpg",
            titulo:     "title1",
            resumo:     "ddd",
            noticia:    "190"
        },
        {
            img:        "../../images/g9.jpg",
            titulo:     "title2",
            resumo:     "aaa",
            noticia:    "204"
        },
        {
            img:        "../../images/g10.jpg",
            titulo:     "title3",
            resumo:     "bbb",
            noticia:    "200"
        }
    ];

    var indice = 0;

    function rotate() {
        var entry = entries[indice];
        document.getElementById('imageb').src = entry.img;
        document.getElementById('titulob').innerHTML = entry.titulo;
        document.getElementById('resumob').innerHTML = entry.resumo;
        document.getElementById('noticiab').value = entry.noticia;

        indice = (indice + 1) % data.length;
    }

    function banner() {
        rotate();
        setTimeout(banner, 5000);
    }

    banner();
})();

Changes:

  1. Put everything in a scoping function to avoid creating global variables.

  2. Use an array of objects rather than parallel arrays.

  3. Use the array's length rather than a separate total variable.

  4. Use the remainder trick for getting the wrap-around on the indice variable.

  5. I added a call to banner(); at the end to get things started, but I assume you have that and just didn't show it.

But again, I don't see any reason your code shouldn't be working as is, other than the possibility of some weird global variable conflict.

Upvotes: 1

Related Questions