How to make a word in the game a word of the effect of typing

This is probably the effect:

The first step is to find an output place.

.../index.html

.......

<div id= "Out" style= "..." ><div>

.......

The second step, JS code part.

Find an Object

Out=document.queryselector ("#output");

Methods for creating an output

function output (say) {

Out.innerhtml= ""; Empty the contents of the dialog box

Says=say.split (""); Say is the string that will be output, processed into an array, easy to play

Count=say.length;

i=0; Used to count

Print=function () {

Out.innerhtml+=says[i]; Appends one character to the current character box, once per call

i++;

if (I>=count) return; Count

SetTimeout (print,100); Delay a period of time to call back

}

Print ();

}

Output ("Faint thunder, haze of the sky, I hope the wind and rain, can leave you Here"); Calling function Output value

The final effect is this:

The basic functionality is complete. However, this method can now only output the element with the id "out", and if you change the name of an element, you have to modify the contents of the function. Perhaps we can refine this method so that it can output values for the specified element.

First, create a two output box:

<div id= "out1" style= "..." ><div>

<div id= "Out2" style= "..." ><div>

Now not only the output, but also the output to the specified place, so the function should pass two values:

function output (Who,say) {

Out.innerhtml= ""; Replace the "out" in the previous function with the parameter "who"

Says=say.split ("");

Count=say.length;

i=0;

Print=function () {

Who.innerhtml+=says[i];

i++;

if (I>=count) return;

SetTimeout (print,100);

}

Print ();

}

Output (Out2, "faint thunder, haze of Sky, I hope the wind and rain, can leave you Here");

SetTimeout ("Output (out, ' faint thunder, haze sky, hope rain comes, can leave you here ')", 4000);

OK, so you can control where to output the text.

Why do you want to set a delay for the second print???

Because... This is the case when they print together:

Calling code:

Output (Out2, "faint thunder, haze of Sky, I hope the wind and rain, can leave you Here");

Output (out, "Faint thunder, cloudy skies, I hope the wind and rain come, can leave you Here");

Results:

That is to say, when I use two consecutive, who and say will overwrite the first use of the value, but at this time the first time the settimeout did not stop (typing speed is one times faster, and there is a undefind, indicating that there are two settimeout in progress). Why is it? You can think of the method output as a typist, and if you give him two urgent jobs at the same time, he will not be able to cope. So here we need more than one typist.

I can't do it in the back of ╯︿╰ .... Qaq

My idea was to define a typer (typist) and then create two typists with the new method.

function Typer () {

The typist's job, of course, is typing.
This.work=function (Who,say) {

Who.innerhtml= "";

Says=say.split ("");

Count=say.length;

i=0;

flag=0;

Print=function () {

Who.innerhtml+=says[i];

i++;

if (I>=count) return;

SetTimeout (print,100);

}

Window.onclick=function () {flag=1;};

Print ();

}

A=new typer ();
B=new typer ();
A.work (out, "Faint thunder, haze sky, I hope the wind and rain, can leave you Here");
B.work (Out2, "faint thunder, haze of Sky, even if the day without rain, I also stay here." ");

But in the end there will be the same situation as just now.

Forget it, update it later.

How to make a word in the game a word of the effect of typing