J'essaie d'imprimer différentes phrases dans un DIV sur un site Web. Je fais cela en itérant dans un tableau (wordCycle). Après avoir parcouru le tableau, je veux que Umdenken. soit affiché en permanence. Mais à la place, il parcourt le tableau, puis génère Umdenken. puis undefined est affiché en permanence.

Voici mon code:

var wordCycle = [
    'Panierte Schuhsohlen',
    'Essbare Sitzbezüge', 
    'Häuser wie Bäume',
    'Städte wie Wälder',
    'Ein neues Bio', 
    'Masken als Nährstoffe'
];

textSequence(0);
function textSequence(i) {

    if (wordCycle.length > i) {
        setInterval(function () {
            document.getElementById("sequence").innerHTML = wordCycle[i];
            textSequence(++i);
        }, 5500); // in milliseconds (1000 = 1 second)

    } 
    else if (wordCycle.length == i) {
        document.getElementById("sequence").innerHTML = 'Umdenken.';
    }
}
0
Uncrout 3 nov. 2020 à 01:39

1 réponse

Meilleure réponse

Utilisez setTimeout pour planifier un appel récursif unique, pas setInterval :

var wordCycle = [
    'Panierte Schuhsohlen',
    'Essbare Sitzbezüge', 
    'Häuser wie Bäume',
    'Städte wie Wälder',
    'Ein neues Bio', 
    'Masken als Nährstoffe'
];

textSequence(0);
function textSequence(i) {

    if (wordCycle.length > i) {
        setTimeout(function () {
            document.getElementById("sequence").innerHTML = wordCycle[i];
            textSequence(++i);
        }, 500); // in milliseconds (1000 = 1 second)

    } 
    else if (wordCycle.length == i) {
        document.getElementById("sequence").innerHTML = 'Umdenken.';
    }
}
<div id="sequence"></div>
1
CertainPerformance 2 nov. 2020 à 22:41