각도 변경 감지 및 비동기 기능 이해

Question

각도 변경 및 템플릿 업데이트를 이해하려고합니다. 나는 사실 조금 혼란 스럽다.

버튼과 간단한 입력 필드가 있습니다. 버튼을 클릭하면 필자는 입력 필드의 값을 "테스트"로 변경합니다. 그런 다음 즉시 반환하는 비동기 함수를 만듭니다. 그런 다음 for 루프를 사용하여 약 4 초 동안 기다립니다 (테스트 용). 나는 무엇을 기대

• 이다 : 그것은 비동기 호출 때문에 입력 필드의 값은 즉시 "asynched"된다.
• 현실 : 입력 필드의 값은 4 초 후에 "asynched"가됩니다.

코드

updateField(){ 
    this.textContentMain.title = "test" 
    this.asyncTestFunction(); 
    for(var i=0;i<3999999999;i++){ 

    } 
    } 

    asyncTestFunction() { 
    this._contentSalesTextConfigService.get(this.contentSalesTextConfig).subscribe(item => { 
     this.textContentMain.title = "asynced"; 
    }) 
    } 

템플릿 여기

<button (click)="updateField()">Update</button> 
<input [ngModel]="textContentMain.title" #titleAccessor="ngModel" name="title" id="title" type="text" > 

Answer 1

는이

// 1. This function will be called as soon as clicked 
updateField(){ 
    this.textContentMain.title = "test" // 2. changes the value 
    this.asyncTestFunction(); // 3. call async function 
    for(var i=0;i<3999999999;i++){ // 5. start for loop 

    } 
    // 6. end for loop 
} 

asyncTestFunction() { 
    this._contentSalesTextConfigService.get(this.contentSalesTextConfig) // 4. call the http request 
    .subscribe(item => { 
     this.textContentMain.title = "asynced"; // 7. asap response is received and for loop finish its execution this wiil be executed. 
    }) 
} 

왜 => 7. 최대한 빨리 모든 의혹을 취소해야 실행의 흐름이다 응답이 수신되고 for 루프 실행을 끝내십시오. 이 실행됩니다. ("for 루프"가 끝날 때까지 기다리는 이유는 무엇입니까?)

What the heck is the event loop anyway?