javascript - 实现了 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>