[JQUERY] 이전 기능이 완료된 후 함수를 호출

이전 기능이 완료된 후 함수를 호출

해결법

1. ---

   1.익명의 콜백을 지정하고 메이크업의 기능 1은 그것을 받아 들일 :

   익명의 콜백을 지정하고 메이크업의 기능 1은 그것을 받아 들일 :

   $('a.button').click(function(){
       if (condition == 'true'){
           function1(someVariable, function() {
             function2(someOtherVariable);
           });
       }
       else {
           doThis(someVariable);
       }
   });
   
   
   function function1(param, callback) {
     ...do stuff
     callback();
   } 
   

2. ---

   2.당신이 jQuery를 1.5을 사용하는 경우 새 Deferreds 패턴을 사용할 수 있습니다 :

   당신이 jQuery를 1.5을 사용하는 경우 새 Deferreds 패턴을 사용할 수 있습니다 :

   $('a.button').click(function(){
       if(condition == 'true'){
           $.when(function1()).then(function2());
       }
       else {
           doThis(someVariable);
       }
   });
   

   편집 : 업데이트 된 블로그 링크 :

   레베카 머피는 여기에 큰 쓰기 업을했다 : http://rmurphey.com/blog/2010/12/25/deferreds-coming-to-jquery/

3. ---

   3.이 시도 :

   이 시도 :

   function method1(){
      // some code
   
   }
   
   function method2(){
      // some code
   }
   
   $.ajax({
      url:method1(),
      success:function(){
      method2();
   }
   })
   

4. ---

   4.약속은 새로운 (그리고 더 많은) 방법은 자바 스크립트에서 비동기 작업을 처리하기 위해 :

   약속은 새로운 (그리고 더 많은) 방법은 자바 스크립트에서 비동기 작업을 처리하기 위해 :

   $('a.button').click(function(){
       if (condition == 'true'){
           function1(someVariable).then(function() {
               //this function is executed after function1
               function2(someOtherVariable);
           });
       }
       else {
           doThis(someVariable);
       }
   });
   
   
   function function1(param, callback) {
       return new Promise(function (fulfill, reject){
           //do stuff
           fulfill(result); //if the action succeeded
           reject(error); //if the action did not succeed
       });
   } 
   

   이것은이 간단한 예를 들어 상당한 오버 헤드처럼 보일 수 있지만, 더 복잡한 코드는 훨씬 더 콜백을 사용하는 것보다. 당신은 쉽게 여러 다음 문을 사용하여 여러 비동기 호출을 체인 수 있습니다 :

   function1(someVariable).then(function() {
       function2(someOtherVariable);
   }).then(function() {
       function3();
   });
   

   당신은 또한 ($ 아약스 호출에서 반환되는) 쉽게의 jQuery deferrds을 포장 할 수 있습니다 :

   Promise.resolve($.ajax(...params...)).then(function(result) {
       //whatever you want to do after the request
   });
   

   @charlietfl는 바와 같이, jqXHR 객체 $ 아약스 () 구현 약속 인터페이스로 돌아갔다. 그것은 약속에 포장 실제로 필요가 없습니다 그래서, 그것은 직접 사용할 수 있습니다 :

   $.ajax(...params...).then(function(result) {
       //whatever you want to do after the request
   });
   

5. ---

   5.하나 개의 함수의 완료는 다음 문서에 바인딩 할 때 또는 사용자 정의 이벤트를 트리거 할 수 있습니다 :

   하나 개의 함수의 완료는 다음 문서에 바인딩 할 때 또는 사용자 정의 이벤트를 트리거 할 수 있습니다 :

   function a() {
       // first function code here
       $(document).trigger('function_a_complete');
   }
   
   function b() {
       // second function code here
   }
   
   $(document).bind('function_a_complete', b);
   

   트리거 만 존재하는 유일한 기능이 후에 실행할 수있어서, 함수 'B'를 이용하여 'A', A가 함수의 실행이 완료 될 때.

6. ---

   6.당신은 이런 식으로 작업을 수행 할 수 있습니다

   당신은 이런 식으로 작업을 수행 할 수 있습니다

   $.when(funtion1()).then(function(){
       funtion2();
   })
   

7. ---

   7.이것은 무엇을하고 있는지 기능 1에 따라 달라집니다.

   이것은 무엇을하고 있는지 기능 1에 따라 달라집니다.

   기능 1이 사업부 값 또는 무언가를 업데이트 같은 몇 가지 간단한 동기 자바 스크립트 일 경우 기능 1가 완료된 후, 다음 기능 2가 실행됩니다.

   기능 1 비동기 호출을하는 경우, 이러한 AJAX 호출로, 당신은 "콜백"방법 (대부분의 AJAX API 용의가 콜백 함수 매개 변수가 있습니다)를 만들어야합니다. 그런 다음 콜백 기능 2 호출합니다. 예를 들면 :

   function1()
   {
     new AjaxCall(ajaxOptions, MyCallback);
   }
   
   function MyCallback(result)
   {
     function2(result);
   }
   

8. ---

   8.방법 1 방법 2, 3 이후에 실행해야하는 경우, (4) 다음의 코드는 자바 스크립트를 사용하여이 지연된 객체의 해결책이 될 수있다.

   방법 1 방법 2, 3 이후에 실행해야하는 경우, (4) 다음의 코드는 자바 스크립트를 사용하여이 지연된 객체의 해결책이 될 수있다.

   방법 항목 함수 () { VAR DFD = 새로운 $ .Deferred (); 에서는 setTimeout (함수 () { 을 console.log ( "내부 방법 - 1"); 방법 2 (DFD); }, 5000); () dfd.promise 리턴; } 함수 방법 2 (DFD) { 에서는 setTimeout (함수 () { 을 console.log ( "내부 방법 - 2"); 의 Method3 (DFD); }, 3000); } 함수의 Method3 (DFD) { 에서는 setTimeout (함수 () { 을 console.log ( "내부 방법 - 3"); dfd.resolve (); }, 3000); } method4 함수 () { 을 console.log ( "내부 방법 - 4"); } VAR 호출 방법 항목 = (); $ .when (호출) 그 때는 (기능 (CB) { method4 (); }); <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

9. ---

   9.기능 1 당신이 그것을 완료하는 데 시간이 소요되며, 당신이 콜백을 추가하는 통제 할 수 없기 때문에 비동기 하나에 설정하려는 일부 동기화 기능이있는 경우 :

   기능 1 당신이 그것을 완료하는 데 시간이 소요되며, 당신이 콜백을 추가하는 통제 할 수 없기 때문에 비동기 하나에 설정하려는 일부 동기화 기능이있는 경우 :

   function function1 (someVariable) {
       var date = Date.now ();
       while (Date.now () - date < 2000);      // function1 takes some time to complete
       console.log (someVariable);
   }
   function function2 (someVariable) {
       console.log (someVariable);
   }
   function onClick () {
       window.setTimeout (() => { function1 ("This is function1"); }, 0);
       window.setTimeout (() => { function2 ("This is function2"); }, 0);
       console.log ("Click handled");  // To show that the function will return before both functions are executed
   }
   onClick ();
   

   출력은 다음과 같습니다

   Click handled
   

   ... 2 초 후 :

   This is function 1
   This is function 2
   

   이 작품 인 JS runtine 작업 루프에 작업을 추가합니다 window.setTimeout ()를 호출하기 때문에 어떤 비동기 호출 차종, 때문에의 기본 원칙 "실행에 완성"는 JS 런타임 보장하지만의 온 클릭 () 이 끝나기 전에 중단되지 않습니다.

   이 같은 재미로 어려운 코드가 이해하기 수 있음을주의 ...

from https://stackoverflow.com/questions/5000415/call-a-function-after-previous-function-is-complete by cc-by-sa and MIT license