setTimeout Do not Wait Time

Question

setTimeout Do not Wait Time

Navigation

#1 by (3 votes)

1

I have this Code:

<html>
    <form method="POST">
        <textarea name="txt" value="" rows="5" cols="100"></textarea>
        <br></br>
        <input type="button" name="" value="Message" onClick="btfunc()" style="width:100; height:100" wrap="soft">
    </form>
    <script charset="utf-8">
        var strs = ["C++", "Python"];
        var i = 0;
        var strpos = 0;

        function btfunc()
        {
            while (i < strs[strpos].length)
            {

                if (strpos > strs.length - 1)
                {
                    break;
                }
                else
                {
                    if (i == strs[strpos].length - 1)
                    {
                        document.forms[0].elements[0].value += strs[strpos].charAt(i);
                        i = -1;
                        strpos++;
                        document.forms[0].elements[0].value += "\n";
                        i++;
                        setTimeout(btfunc, 2000);
                    }
                    else
                    {
                        document.forms[0].elements[0].value += strs[strpos].charAt(i);
                        i++;
                        setTimeout(btfunc, 100);
                    }
                }

            }

        }
    </script>

</html>

When I Click On The Button It Inserts All Text Without Going Pausing In SetTimeouts, Why Does It Happen?

javascript html5

asked by anonymous 01.12.2014 / 23:50

1 answer

Multi-thread in Java Socket Center element on a page

score 3 · Accepted Answer

Your main problem is to be calling setTimeout(func, 100) . That is, the while cycle runs and creates a "waitlist" with those setTimeout . Since the code ends execution even before the first setTimeout is run in practice all setTimeout point to the same moment and are written at the same time. The solution is to be able to delay execution by creating increasing values for each setTimeout .

Trying to mix your idea with my logic I suggest this:

var strs = ["C++", "Python"];
var i = 0;

function maquinaEscrever(str) {
    var campo = document.forms[0].elements[0];
    var pedacos = str.split('');

    pedacos.forEach(function (letra, index) {
        setTimeout(function () {
            campo.value += letra;
            if (index + 1 == pedacos.length){
                setTimeout(btfunc, 2000);
                campo.value += '\n';
                i++;
            }
        }, index * 100);
    });
}

function btfunc() {
    if (strs[i]) maquinaEscrever(strs[i]);
    else i = 0;
}

<form method="POST">
    <textarea name="txt" value="" rows="5" cols="100"></textarea>
    <br></br>
    <input type="button" name="" value="Message" onClick="btfunc()" style="width:100; height:100" wrap="soft" />
</form>

So divide the code into parts. I created a callback which is what calls the btfunc function depoid again from the first string being written.

I created a "typewriter" that in the bottom part a stirng in letters and writes a one seperated by% with% of milliseconds. I used the index / position of the letter in the string to make that difference of milliseconds since this 100 runs immediately.

I do not understand why it uses a textarea, could use a div, but I did not move in that part because the problem was not there.