Javascript - 순서대로 기능 실행

Question

현재(아래 코드로 자동화 됨) 유형의 웹 페이지에 텍스트 상자 ta#이 있습니다.

문제 # 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 개체가 당신의 친구입니다 수 있습니다. 다음 코드는 모든 최신 브라우저에서 작동합니다. 그리고 Internet Explorer 제외).

여기서 우리는 type을 입력하면 타이핑이 완료되었을 때 해결 될 것입니다. 입력이 완료되면 writer이 false을 반환하도록 코드를 약간 수정했습니다. 코드가있는 경우 코드는 약속을 해결하고 제한 시간 실행을 중지합니다. 이 작업을 수행하는 데는 몇 가지 방법이 있지만, 시간이 필요했던 것입니다 ...

텍스트 상자를 클릭 할 때 타이핑을 멈추게하는 코드를 추가했습니다. 그러나 두 텍스트 상자의 모든 입력을 중지합니다. 두 번째 텍스트 상자로 계속 이동하려면 코드를 가지고 놀 수 있습니다.

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