在 Javascript 中创建一个可重用的类型编写器效果函数？

Question

I know the basics of what I need to do here, but my attempt at coding it is riddled with problems so here is what I want to do.

Define a series of strings to be called up into a function that types it onto the screen with a slight delay between each letter. I've found some examples of people making typewriter title cards, but these are not designed to be used like functions that can be called up on the fly. For this particular project, we need the text to function like a makeshift dialog system that won't be called up until the function is called with a specific string. Like a button with " onclick="dialogFunction(idOfStringToBeTyped) " what I have looks like this:

var d1Example = "Hello, I am example dialog";

function dialog(dialogString) {
    var i;
for (i = 0; i <= dialogString.length(); i++) { 
    document.write( dialogString.charAt(i) );
     java.lang.Thread.sleep(50);
}}

So my attempts to code the content has been... brute force-y...

EDIT: to include my attempt, should have been there in the first place, sorry about that.

This, in theory, should work, but in practice does nothing. I probably have a syntax error. but really it doesn't make sense to me why this doesn't work.

Answer 1

You should look into the JavaScript functions setTimeout and Math.random() .

You can use Math.random() to create a floating point integer between 0 and 1.

var multipule = 5
var rand = Math.random();  // 0.5680401974599227
var randInSeconds = rand * multipule // 2.840200987299614
var waitInSeconds = Math.round(randInSeconds) // 3

Then use the the setTimeout out method to call the code that writes each character. setTimeout takes two parameters, a function and the number of seconds:

var writeCharacter = function(){
  ... 
};

setTimeout(writeCharacter, 300);

I'll leave it to you to work out all the timing.