Javascript - 按顺序运行函数(不同时)

Question

我有一个网页，当前在文本框 ta# 中键入 text#(使用下面的代码自动执行)。

问题#1)当我运行该函数时，我只能弄清楚如何使其同时输入所有文本框。 -- 我希望它自然地(1 个接着 1 个，每个之间有轻微的延迟)输入到每个文本框中。我怎样才能做到这一点？

问题#2)一旦用户单击/选择文本框，关闭/清除这种自动输入的正确方法是什么？

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.

Answer 1

setTimeout 使其本质上是异步的，因此 Promise对象是你的 friend 。请注意，以下代码适用于所有现代浏览器。这不包括 Internet Explorer :)。

在这里，我们让 type 返回一个 Promise，该 Promise 将在输入完成后得到解决。我稍微修改了您的代码，以便在输入完成时 writer 返回 false，如果有，那么代码将解析 Promise，并停止运行超时。有几种方法可以做到这一点，但这就是我有时间的......

我还添加了快速而肮脏的代码，当您单击文本框时，该代码将停止输入。但是，请注意，它会停止两个文本框的所有输入。如果您想要的话，您可以尝试一下代码，让它继续转到第二个文本框。

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