CODEWITHSUNDEEP
javascript
heyitsmyusername
heyitsmyusername

Reputation: 651

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

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.

Upvotes: 0

Views: 57

Answers (1)

Heretic Monkey
Heretic Monkey

Reputation: 12115

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" />

Upvotes: 3

Related Questions