계속하기 전에 마무리 한 기능을 위해 적절한 방법을 대기?

해결법

1.이 같은 비동기 작업을 처리하는 한 가지 방법은 콜백 함수, 예를 사용하는 것입니다 :

이 같은 비동기 작업을 처리하는 한 가지 방법은 콜백 함수, 예를 사용하는 것입니다 :
```
function firstFunction(_callback){
    // do some asynchronous work
    // and when the asynchronous stuff is complete
    _callback();    
}

function secondFunction(){
    // call first function and pass in a callback function which
    // first function runs when it has completed
    firstFunction(function() {
        console.log('huzzah, I\'m done!');
    });    
}
```
@Janaka Pushpakumara의 제안에 따라, 당신은 지금 같은 일을 달성하기 위해 기능을 화살표 사용할 수 있습니다. 예를 들면 :

하여 firstFunction (() =>을 console.log ( '만세 삼창, I \'m 다! '))

업데이트 : 나는 꽤 많은 시간 전에이 대답하여 정말 업데이트 할. 콜백 잘 절대적이지만, 내 경험에 그들은 읽기 및 유지 관리가 더 어렵 코드 발생하는 경향이있다. 이 진행률 이벤트를 전달하는 등 아직도하지만이를 사용 상황, 그리고 매개 변수로있다. 이 업데이트는 대안을 강조하는 것입니다.

또한 원래의 질문은 specificallty 함수가 동기 인 경우라고 할 때,이 차단되므로, 경우에 사람이 혼동, 비동기를 언급하지 않습니다. 예를 들면 :
```
doSomething()
// the function below will wait until doSomething completes if it is synchronous
doSomethingElse()
```
묵시적으로 함수가 비동기 불구하고, 방법은 내가 오늘 내 모든 비동기 작업을 처리하는 경향이 경우 비동기 / await를 함께합니다. 예를 들면 :
```
const secondFunction = async () => {
  const result = await firstFunction()
  // do something else here after firstFunction completes
}
```
IMO, 비동기은 / await를 귀하의 코드를 훨씬 더 읽기 (대부분의 시간을) 직접 약속을 사용하는 것보다 있습니다. 당신이 잡는 오류를 처리해야하는 경우 다음 시도 / 캐치와 함께 사용. 더 여기에 대해 읽기 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function합니다.

2.사용 비동기 / await를 :

사용 비동기 / await를 :

async function firstFunction(){
  for(i=0;i<x;i++){
    // do something
  }
  return;
};

다음은 반환을 기다리는 다른 기능에 await를 사용합니다 :

async function secondFunction(){
  await firstFunction();
  // now wait for firstFunction to finish...
  // do something else
};

3.당신이 여기에서 중요한 점을 놓치고 나타납니다 자바 스크립트는 단일 스레드 실행 환경입니다. 이제, 당신의 코드를 다시 보면 ( "여기") 내가 경고를 추가 한주의하자 :

당신이 여기에서 중요한 점을 놓치고 나타납니다 자바 스크립트는 단일 스레드 실행 환경입니다. 이제, 당신의 코드를 다시 보면 ( "여기") 내가 경고를 추가 한주의하자 :
```
var isPaused = false;

function firstFunction(){
    isPaused = true;
    for(i=0;i<x;i++){
        // do something
    }
    isPaused = false;
};

function secondFunction(){
    firstFunction()

    alert("Here");

    function waitForIt(){
        if (isPaused) {
            setTimeout(function(){waitForIt()},100);
        } else {
            // go do that thing
        };
    }
};
```
당신은 isPaused 기다릴 필요가 없습니다. 당신이 "여기"경고를 볼 때, isPaused 이미 거짓 것이며,하여 firstFunction 반환 것입니다. 그의 당신이 내부에서 "수율"수 없기 때문에 루프 (// 뭔가 할), 루프가 중단되지 않을 수 있습니다 완전히 완료 첫번째로해야합니다 (자세한 내용은 : 자바 스크립트 스레드 처리와 인종 조건).

즉, 여전히하여 firstFunction 내부 코드 흐름이 비동기로하고 하나 콜백을 사용하거나 발신자에게 통지 할 것을 약속 할 수있다. 당신은 루프에 포기해야 대신하는 경우 (JSFiddle)와 함께 시뮬레이션 할 것입니다 :
```
function firstFunction()
{
    var deferred = $.Deferred();

    var i = 0;
    var nextStep = function() {
        if (i<10) {
            // Do something
            printOutput("Step: " + i);
            i++;
            setTimeout(nextStep, 500); 
        }
        else {
            deferred.resolve(i);
        }
    }
    nextStep();
    return deferred.promise();
}

function secondFunction()
{
    var promise = firstFunction();
    promise.then(function(result) { 
        printOutput("Result: " + result);
    });
}
```
보조 노트에, 자바 스크립트 1.7 발전기의 일환으로 수율 키워드를 발표했다. 즉, 달리 동기 JavaScript 코드 플로우 (상세 및 예) 비동기 구멍 "펀치"하는 것을 허용 할 것이다. 그러나, 발전기에 대한 브라우저 지원은 현재 파이어 폭스와 크롬, AFAIK로 제한됩니다.
4.첫째 완료 한 기능은 비동기 / await를 기능 약속을 사용하는 것입니다에 대한 우아한 방법은 대기.

첫째 완료 한 기능은 비동기 / await를 기능 약속을 사용하는 것입니다에 대한 우아한 방법은 대기.
5.약속에 대한 유일한 문제는 IE가이를 지원하지 않습니다. 에지는 않지만, IE 10의 많음이있다 11가 아웃 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise (하단에 호환성)

약속에 대한 유일한 문제는 IE가이를 지원하지 않습니다. 에지는 않지만, IE 10의 많음이있다 11가 아웃 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise (하단에 호환성)

그래서, 자바 스크립트는 단일 스레드입니다. 비동기 호출을하지 않는 경우, 그것은 예상 동작합니다. 주요 자바 스크립트 스레드가 코드에 나타나는 순서대로 다음 중 하나를 실행하기 전에 완전히 하나 개의 함수를 실행합니다. 동기 기능에 대한 순서를 보장하는 것은 사소한 - 각각의 함수가 호출 된 순서로 완전히 실행할 것이다.

작업의 기본 단위로 동기 기능 생각. 주요 자바 스크립트 스레드는 문이 코드에 나타나는 순서대로, 완전히를 실행합니다.

그러나, 다음과 같은 상황에서 같은 비동기 호출에 던져 :
```
showLoadingDiv(); // function 1

makeAjaxCall(); // function 2 - contains async ajax call

hideLoadingDiv(); // function 3
```
이것은 당신이하고 싶은 일을하지 않습니다. 그것은 즉시 기능 1, 기능 2, 기능 3.로드 DIV 깜박 실행하고 AJAX 호출이 makeAjaxCall ()가 반환에도 불구하고, 거의 완료되지 않은 동안은 사라 졌어요. 합병증은 makeAjaxCall ()가 주요 자바 스크립트 스레드의 각 스핀에 의해 조금씩 고급 조금 있습니다 덩어리로 작업을 깨진 점이다

6.귀하의 주요 재미는 firstFun 호출합니다 그것의 완성에 다음 재미를 호출합니다.

귀하의 주요 재미는 firstFun 호출합니다 그것의 완성에 다음 재미를 호출합니다.

async firstFunction() {
            const promise = new Promise((resolve, reject) => {
                for (let i = 0; i < 5; i++) {
                    // do something
                    console.log(i);
                    if (i == 4) {
                        resolve(i);
                    }
                }
            });
            const result = await promise;
        }

        second() {
            this.firstFunction().then( res => {
                // third function call do something
                console.log('Gajender here');
            });
        }

7.내가 사슬에 여러 작업을 실행해야하기 때문에 이것은 내가 무엇을 최대 온.

내가 사슬에 여러 작업을 실행해야하기 때문에 이것은 내가 무엇을 최대 온.

<button onclick="tprom('Hello Niclas')">test promise</button>

<script>
    function tprom(mess) {
        console.clear();

        var promise = new Promise(function (resolve, reject) {
            setTimeout(function () {
                resolve(mess);
            }, 2000);
        });

        var promise2 = new Promise(async function (resolve, reject) {
            await promise;
            setTimeout(function () {
                resolve(mess + ' ' + mess);
            }, 2000);
        });

        var promise3 = new Promise(async function (resolve, reject) {
            await promise2;
            setTimeout(function () {
                resolve(mess + ' ' + mess+ ' ' + mess);
            }, 2000);
        });

        promise.then(function (data) {
            console.log(data);
        });

        promise2.then(function (data) {
            console.log(data);
        });

        promise3.then(function (data) {
            console.log(data);
        });
    }

</script>

8.아무도이 간단한 패턴을 언급하지 않은 이유를 궁금해? :

아무도이 간단한 패턴을 언급하지 않은 이유를 궁금해? :
```
(function(next) {
  //do something
  next()
}(function() {
  //do some more
}))
```
무작정 기다리고에 대한 시간 제한을 사용하는 것은 잘못된 방법입니다; 과 약속을 포함하는 단지 코드에 더 많은 복잡성을 추가합니다. 영업 이익의 경우 :
```
(function(next) {
  for(i=0;i<x;i++){
    // do something
    if (i==x-1) next()
  }
}(function() {
  // now wait for firstFunction to finish...
  // do something else
}))
```
작은 데모 -> http://jsfiddle.net/5jdeb93r/

from https://stackoverflow.com/questions/21518381/proper-way-to-wait-for-one-function-to-finish-before-continuing by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를이 - 숨겨진 입력 필드에 값 변경을 감지 (0)	2020.10.26
[JQUERY] jQuery를 슬라이드 왼쪽 쇼 (0)	2020.10.26
[JQUERY] 속성에 의해 선택 요소 (0)	2020.10.26
[JQUERY] jQuery로 JSON 트리를 검색하는 방법 (0)	2020.10.26
[JQUERY] ASP.NET MVC 아약스 오류 처리 (0)	2020.10.26

복붙노트

[JQUERY] 계속하기 전에 마무리 한 기능을 위해 적절한 방법을 대기?

계속하기 전에 마무리 한 기능을 위해 적절한 방법을 대기?

해결법

1.이 같은 비동기 작업을 처리하는 한 가지 방법은 콜백 함수, 예를 사용하는 것입니다 :

2.사용 비동기 / await를 :

3.당신이 여기에서 중요한 점을 놓치고 나타납니다 자바 스크립트는 단일 스레드 실행 환경입니다. 이제, 당신의 코드를 다시 보면 ( "여기") 내가 경고를 추가 한주의하자 :

4.첫째 완료 한 기능은 비동기 / await를 기능 약속을 사용하는 것입니다에 대한 우아한 방법은 대기.

5.약속에 대한 유일한 문제는 IE가이를 지원하지 않습니다. 에지는 않지만, IE 10의 많음이있다 11가 아웃 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise (하단에 호환성)

6.귀하의 주요 재미는 firstFun 호출합니다 그것의 완성에 다음 재미를 호출합니다.

7.내가 사슬에 여러 작업을 실행해야하기 때문에 이것은 내가 무엇을 최대 온.

8.아무도이 간단한 패턴을 언급하지 않은 이유를 궁금해? :

'JQUERY' 카테고리의 다른 글

티스토리툴바