비동기 javascript_javascript 기법의 원리와 구현 기법 소개-JS 튜토리얼-php.cn

작업 요구로 인해 웹 페이지를 통해 일괄적으로 시스템에 데이터를 제출하기 위해 웹 페이지에 스크립트를 작성해야 합니다. 그래서 Greasemonkey 플러그인이 생각나서 쓰기 시작했는데 문제가 순조롭게 해결된 것을 확인했습니다. 그런데 대본을 요약하고 정리하면서 '이보다 더 간단할 수는 없을까?'라는 질문을 습관적으로 스스로에게 던졌습니다.
내 대답은 당연히 '그렇다'이다.

먼저 데이터 일괄 제출에 대한 요구 사항을 검토합니다. 시스템에 삽입할 사용자 데이터 일괄 처리가 있지만 시스템 라이브러리 테이블 구조가 결정적이지 않기 때문에 삽입을 위해 SQL 문으로 변환할 수 없습니다. . 입력해야 할 데이터가 거의 200개에 달합니다. 수동으로 시스템에 입력하더라도 하루는 걸릴 것 같습니다. 프로그래머로서 당연히 그런 어리석은 짓은 하지 않겠습니다. 이를 해결하려면 프로그램을 사용해야 합니다. 이 프로그래밍 과정에는 하루가 걸렸습니다. 수동 입력에 비해 제 추가 수입은 이 블로그 게시물에서 나오는데, 이는 절대적으로 비용 효율적입니다!

프로그래밍 플랫폼을 선택하는 데는 시간이 걸리지 않았습니다. 브라우저는 물론 Firefox를 기반으로 직접 스크립트를 작성하기로 했습니다. 스크립트 작업 과정:
스크립트에 삽입할 데이터를 미리 저장합니다
마우스 클릭을 시뮬레이션하여 페이지의 입력창을 엽니다
입력창에 데이터를 입력하고 클릭을 시뮬레이션합니다. "제출" 버튼을 눌러 시스템에 제출된 데이터를 제출하세요.
모든 데이터가 처리될 때까지 순차적으로 반복합니다.

여기서 기술적인 어려움은
입력창을 열려면 네트워크 상태에 따라 불규칙한 시간 동안 기다려야 합니다.
데이터를 백그라운드로 제출하면 다음 데이터로 순환하기 전에 처리가 완료될 때까지 기다려야 합니다.
내가 초보자라면 물론 다음과 유사한 애플리케이션 로직을 직접 작성할 것입니다.

코드 복사 코드 다음과 같습니다:

for(var i = 0; i < dataArray.length; i) 
{ 3: clickButtonForInputWindow() 
waitInputWindow() 
enterInputData; (dataArray[i] ); 
clickSubmitButton(); 
waitInputWindowClose(); 
}

실제로 모든 브라우저는 몇 분 후에 흰색 화면으로 전환됩니다. '응답 없음' 메시지가 나오며 강제 종료되었습니다. 그 이유는 브라우저가 JavaScript를 호출하면 실행을 위해 CPU가 js에 넘겨지고 인터페이스 메시지를 처리할 시간이 없기 때문에 기본 인터페이스가 응답을 멈추기 때문입니다.

"잠금 없음" 요구 사항을 충족하기 위해 다음과 같이 스크립트를 수정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

for(var i = 0; i < dataArray.length; i) 
{ 
setTimeout(clickButtonForInputWindow) 
… 🎜>setTimeout(waitInputWindowClose ); 
}

실제로 setTimeout 및 setInterval은 브라우저가 지원할 수 있는 유일한 비동기 작업입니다. 비동기 작업을 구현하기 위해 이 두 함수를 보다 우아하게 사용하는 방법은 무엇입니까? 현재의 간단한 대답은 Lao Zhao의 Wind.js입니다. 이 함수 라이브러리를 사용하지는 않았지만 $await 호출만으로도 단순성에 대한 일관된 요구 사항을 충족합니다. 그러나 나와 같은 단일 파일 스크립트의 경우 인터넷에서 외부 js 라이브러리를 다운로드하는 것은 비동기 작업을 지원하는 코드 조각을 복사하는 것만큼 빠르고 즐겁지 않습니다.

그래서 저는 다른 방법을 찾아 컴파일이 필요 없고 사용하기 쉽고 복사 및 붙여넣기가 가능한 비동기 함수 라이브러리를 만들기로 결정했습니다.

비동기에 대해 이야기하기 전에 동기 작업의 여러 구조적 유형을 떠올려 보겠습니다.

순서: 명령문이 실행되는 순서입니다.
판단: 판단 명령문입니다.
Loop: strict 점프(goto)여야 하는데 대부분의 현대 언어에서는 goto를 취소했습니다. 루프는 실제로 if와 goto의 조합인 복합 구조여야 합니다.
비동기 작업의 어려움은 두 가지에 있습니다.

비동기 판단: 비동기 상황에서의 판단은 기본적으로 조건이 만족되는지 감지한 후 특정 작업을 수행하는 것입니다.
비동기 시퀀스: 시퀀스의 각 단계 후에 제어가 반환되고 다음 타임 슬라이스에서 다음 단계가 대기됩니다. 어려운 점은 질서를 유지하는 것입니다. 특히 두 개의 순차적 작업 사이에 비동기 루프가 있는 경우 더욱 그렇습니다.
비동기 루프: 각 루프가 끝나면 제어가 브라우저로 반환되며 이 루프는 실행이 끝날 때까지 계속됩니다.
물론 가장 간단한 구현은 비동기 루프입니다.

코드 복사 코드는 다음과 같습니다. 다음:

function asyncWhile(fn, 간격)
{
if( fn == null || (typeof(fn) != "string" && typeof(fn) != "함수") )
return;
var 래퍼 = function()
{
if( (typeof(fn) == "함수" ? fn() : eval(fn) ) != = false )
setTimeout(wrapper, 간격 == null? 1: 간격)
}
wrapper()
}

핵심 내용은 fn 함수의 반환 값이 false가 아닌 경우 다음 setTimeout 등록 호출을 계속하는 것입니다.

사실 "대기 및 실행" 논리는 기본적으로 비동기 루프 문제입니다. 이 상황을 구현하는 방법의 예는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

 
asyncWhile(function (){ 
if( xxxCondition == false ) 
return true; // 루프가 계속됨을 나타냅니다.
else 
doSomeThing(); 
return false; / / 루프를 계속할 필요가 없음을 나타냅니다
});

대기하지 않고 실행하는 로직의 경우 간단한 setTimeout이면 충분합니다.
비동기는 쉽지만 순서를 비동기로 구현하는 것이 어렵습니다. 첫 번째 이유는 3단계를 구현하고 싶었지만 두 번째 부분은 100번이 넘는 비동기 루프였습니다. 즉, 제가 구현하려는 3단계 작업은 실제로 103개의 순차적 비동기 작업입니다. 브라우저에서 반응형 대기를 구현하는 방법을 찾기 위해 뇌를 검색한 결과 Firefox에서만 구현을 찾았고 특권 호출을 신청해야 했습니다.
마지막으로 "실행 체인"이라는 개념을 도입하는 간단한 방법을 생각해 냈습니다. 동일한 실행 체인의 모든 등록 기능은 순차적이며 서로 다른 실행 체인 간에는 관계가 없습니다. 또한, 상호 배제(뮤텍스) 등의 개념도 제공하지 않습니다. 동기화를 원할 경우 코드에서 직접 확인하세요.
동일한 실행 체인에는 실행 토큰이 저장되며, 토큰이 함수 일련 번호와 일치하는 경우에만 실행이 허용되므로 비동기 실행 순서가 보장됩니다.

코드 복사 코드는 다음과 같습니다.

function asyncSeq(funcArray, chainName, abortWhenError) 
 { 
if( typeof(funcArray) == "function" ) 
return asyncSeq([funcArray], chainName, abortWhenError) 

if( funcArray == null || funcArray. length == 0 ) 
return; 

if( chainName == null ) chainName = "__default_seq_chain__" 
var tInfos = asyncSeq.chainInfos 
 var tInfo = tInfos[chainName] = tInfos[chainName] || {count : 0, currentIndex : -1, abort : false} 

for(var i = 0; i < funcArray.length; i ) 
{ 
asyncWhile(function(item, tIndex){ 
return function(){ 
if( tInfo.abort ) 
return false; 
if( tInfo.currentIndex < tIndex ) 
return true; 
else if( tInfo.currentIndex == tIndex ) 
{ 
try{ 
item() 
} 
catch(e){ 
if ( abortWhenError ) tInfo.abort = true; 
} 
마침내{ 
tInfo.currentIndex ; 
} 
} 
else 
{ 
if( abortWhenError ) tInfo.abort = true; 
} 
return false; 
}(funcArray[i], tInfo.count )); function() { 
if( tInfo.count > 0 && tInfo.currentIndex == -1 ) 
tInfo.currentIndex = 0; 
},20) // 디버깅상의 이유로 시작이 지연되었습니다. 추가
}


 이로써 Copy&Paste를 지원하는 비동기 js 함수 라이브러리가 완성되었습니다. 구체적인 사용 예는 다음과 같습니다. 

코드 복사

코드는 다음과 같습니다.

function testAsync() 
{ 
asyncSeq([function(){println("aSyncSeq -0 ");} 
, function(){println("aSyncSeq -1 ") ;} 
, function(){println("aSyncSeq -2 ");} 
, function(){println("aSyncSeq -3 ");} 
, function(){println("aSyncSeq -4 ");} 
, function(){println("aSyncSeq -5 ");} 
, function(){println("aSyncSeq -6 ");} 
, function(){ println("aSyncSeq -7 ");} 
, function(){println("aSyncSeq -8 ");} 
, function(){println("aSyncSeq -9 ");} 
, function(){println("aSyncSeq -10 ");} 
, function(){println("aSyncSeq -11 ");} 
, function(){println("aSyncSeq -12 ");} 
, function(){println("aSyncSeq -13 ");} 
, function(){println("aSyncSeq -14 ");} 
, function(){println("aSyncSeq -15 ");} 
, function(){println("aSyncSeq -16 ");} 
, function(){println("aSyncSeq -17 ");} 
, function(){println( "aSyncSeq -18 ");} 
, function(){println("aSyncSeq -19 ");} 
, function(){println("aSyncSeq -20 ");} 
, function( ){println("aSyncSeq -21 ");} 
, function(){println("aSyncSeq -22 ");} 
, function(){println("aSyncSeq -23 ");} 
, function(){println("aSyncSeq -24 ");} 
, function(){println("aSyncSeq -25 ");} 
, function(){println("aSyncSeq -26 ") ;} 
, function(){println("aSyncSeq -27 ");} 
, function(){println("aSyncSeq -28 ");} 
, function(){println("aSyncSeq -29 ");} 
]); 

asyncSeq([function(){println("aSyncSeq 테스트 체인 -a0 ");} 
, function(){println("aSyncSeq 테스트 체인 -a1 ");} 
 , function(){println("aSyncSeq 테스트 체인 -a2 ");} 
, function(){println("aSyncSeq 테스트 체인 -a3 ");} 
, function(){println(" aSyncSeq 테스트 체인 -a4 ");} 
, function(){println("aSyncSeq 테스트 체인 -a5 ");} 
, function(){println("aSyncSeq 테스트 체인 -a6 ") ;} 
, function(){println("aSyncSeq 테스트 체인 -a7 ");} 
, function(){println("aSyncSeq 테스트 체인 -a8 ");} 
], " 테스트 체인"); 

asyncSeq([function(){println("aSyncSeq -a0 ");} 
, function(){println("aSyncSeq -a1 ");} 
, function(){println ("aSyncSeq -a2 ");} 
, function(){println("aSyncSeq -a3 ");} 
, function(){println("aSyncSeq -a4 ");} 
, 함수 (){println("aSyncSeq -a5 ");} 
, function(){println("aSyncSeq -a6 ");} 
, function(){println("aSyncSeq -a7 ");} 
, function(){println("aSyncSeq -a8 ");} 
]); 
} 

var textArea = null; 

function println(text) 
{ 
if( textArea == null ) 
{ 
textArea = document.getElementById("text"); 
textArea.value = ""; 
} 

textArea.value = textArea.value text "rn"; 
}