Javascript - Run functions in order (not at same time)

Question

I have a webpage the currently types text# (automated with code below) into a text box ta#.

Problem #1) When I run the function, I can only figure out how to make it type into all textboxes at the same time. -- I want it to type naturally (1 by 1, with a slight delay between each) into each textbox. How can I accomplish this?

Problem #2) What is the proper way to shut off/clear this automated typing once the user clicks/selects a text box?

var text1 = "Type this into textbox usr"; var text2 = "Type this into textbox usr2"; var ta1 = document.getElementById("usr"); var ta2 = document.getElementById("usr2"); function type(string,element){ (function writer(i){ if(string.length <= i++){ element.value = string; return; } element.value = string.substring(0,i); if( element.value[element.value.length-1] != " " )element.focus(); var rand = Math.floor(Math.random() * (100)) + 140; setTimeout(function(){writer(i);},rand); })(0) } type(text1,ta1); type(text2,ta2); // This doesnt work right.

Assuming you consider this part done on element.value = string you don't actually need promises, you can do it with a callback. Try putting in a callback (with delay if you want). Then you should be able to make it work with something like type(text1,ta1, type.bind(null,text2,ta2)) assuming you wrote it like function type(string,element, callback){ — dlsso
– dlsso, Commented Jul 18, 2016 at 21:52
the functions aren't running "at the same time", they're running one at a time, after the delay you specified for each. — user400654
– user400654, Commented Jul 18, 2016 at 22:05

Heretic Monkey · Accepted Answer · 2016-07-18 21:47:24Z

setTimeout makes this inherently asynchronous so the Promise object is your friend. Note that the following code will work in all modern browsers. And that excludes Internet Explorer :).

Here we make type return a Promise that will be resolved when the typing has completed. I've modified your code slightly such that writer returns false when the typing is complete, and if it has, then the code will resolve the Promise, and stop running the timeout. There are a few ways of doing this, but this is what I had time for...

I've also added quick-and-dirty code that will stop the typing when you click into a textbox. However, note that it stops all typing for both textboxes. You can play around with the code to get it to keep going to the second textbox if that's what you want.

var text1 = "Type this into textbox usr"; var text2 = "Type this into textbox usr2"; var ta1 = document.getElementById("usr"); var ta2 = document.getElementById("usr2"); function type(string, element) { var timeout; element.addEventListener('click', function() { if (timeout) { clearTimeout(timeout); } }); var completePromise = new Promise(function(resolve, reject) { (function writer(i) { if (string.length <= i++) { element.value = string; return false; } element.value = string.substring(0, i); if (element.value[element.value.length - 1] != " ") { element.focus(); } var rand = Math.floor(Math.random() * (100)) + 140; timeout = setTimeout(function() { if (!writer(i)) { resolve(); clearTimeout(timeout); } }, rand); return true; })(0); }); return completePromise; } type(text1, ta1).then(function() { type(text2, ta2); });

<input id="usr" type="text" /> <input id="usr2" type="text" />

Collectives™ on Stack Overflow

Javascript - Run functions in order (not at same time)

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related