實現了JS打字機效果，無法弄清楚如何使它在最后一個數組項之后循環

Question

我已經達到了我期望的打字機效果。 問題是，當到達數組的最后一項時，循環不會重新開始，這就是我希望弄清楚如何實現的效果。

這是我的筆： http : //codepen.io/marlee/pen/MeYOZd

這是代碼：

HTML：

<div class="normalText">Flex allows you to manage information relating to <span id="changeText">customers.</span></div>

CSS：

body {
background: #333;
color: #eee;
font-family: Consolas, monaco, monospace;
}

使用Javascript：

var container = document.getElementById('changeText');

var things = ['investors.','clients.', 'stakeholders.', 'students.',    'properties.'];
var t = -1;
var thing = '';
var message = container.innerHTML;
var mode = 'write';
var delay = 1000;

function updateText(txt) {
  container.innerHTML = txt;
}

function tick() {

    if(container.innerHTML.length == 0) {
        t++;
        thing = things[t];
        message = '';
        mode = 'write';
     }

switch(mode) {
    case 'write' :
        message += thing.slice(0, 1);
        thing = thing.substr(1);

        updateText(message);

        if(thing.length === 0 && t === (things.length - 1)) {
            window.clearTimeout(timeout);
            return;
        }

        if(thing.length == 0){
            mode = 'delete';
            delay = 1500;
        } else {
            delay = 32 + Math.round(Math.random() * 40);
        }

        break;

    case 'delete' :
        message = message.slice(0, -1);
        updateText(message);

        if(message.length == 0)
        {
            mode = 'write';
            delay = 1500;
        } else {
            delay = 32 + Math.round(Math.random() * 100);
        }
        break;
    }

    timeout = window.setTimeout(tick, delay);
}

var timeout = window.setTimeout(tick, delay);

Answer 1

我改了

您可以在這里查看差異： https : //www.diffnow.com/?report=diqrj

 var container = document.getElementById('changeText'); var things = ['investors.','clients.', 'stakeholders.', 'students.', 'properties.']; var t = -1; var thing = ''; var message = container.innerHTML; things.push(message); var mode = 'write'; var delay = 1000; function updateText(txt) { container.innerHTML = txt; } function tick() { if(container.innerHTML.length == 0) { t = (t+1) % things.length; thing = things[t]; message = ''; mode = 'write'; } switch(mode) { case 'write' : message += thing.slice(0, 1); thing = thing.substr(1); updateText(message); if(thing.length == 0){ mode = 'delete'; delay = 1500; } else { delay = 32 + Math.round(Math.random() * 40); } break; case 'delete' : message = message.slice(0, -1); updateText(message); if(message.length == 0) { mode = 'write'; delay = 1500; } else { delay = 32 + Math.round(Math.random() * 100); } break; } timeout = window.setTimeout(tick, delay); } var timeout = window.setTimeout(tick, delay); 

 body { background: #333; color: #eee; font-family: Consolas, monaco, monospace; } 

 <div class="normalText">Flex allows you to manage information relating to <span id="changeText">customers.</span></div>