[JQUERY] 어떻게 자바 스크립트에서 비동기 기능을 만들 수 있습니까?

어떻게 자바 스크립트에서 비동기 기능을 만들 수 있습니까?

해결법

1. ---

   1.당신은 진정으로 사용자 정의 비동기 기능을 할 수 없습니다. 기술과 같은, 기본적으로 제공에 당신은 결국 활용해야합니다 :

   당신은 진정으로 사용자 정의 비동기 기능을 할 수 없습니다. 기술과 같은, 기본적으로 제공에 당신은 결국 활용해야합니다 :

   사실, 애니메이션 jQuery를이 setInterval을 사용합니다.

2. ---

   2.당신은 타이머를 사용할 수 있습니다 :

   당신은 타이머를 사용할 수 있습니다 :

   setTimeout( yourFn, 0 );
   

   (yourFn은 함수에 대한 참조입니다)

   또는, Lodash과 :

   _.defer( yourFn );
   

3. ---

   3.여기 간단한 해결책 (그것에 대해 다른 쓰기)가 http://www.benlesh.com/2012/05/calling-javascript-function.html

   여기 간단한 해결책 (그것에 대해 다른 쓰기)가 http://www.benlesh.com/2012/05/calling-javascript-function.html

   그리고 여기 당신은 준비가 위의 해결책이 있습니다

   function async(your_function, callback) {
       setTimeout(function() {
           your_function();
           if (callback) {callback();}
       }, 0);
   }
   

   TEST 1 (5 출력 '1 × 2 3'또는 '1 2 × 3'또는 '1 2 3 X') :

   console.log(1);
   async(function() {console.log('x')}, null);
   console.log(2);
   console.log(3);
   

   TEST 2 (는 항상 출력 'X 1') :

   async(function() {console.log('x');}, function() {console.log(1);});
   

   이 기능은 제한 시간 0으로 실행 - 그것은 비동기 작업을 시뮬레이션합니다

4. ---

   4.여기서 비동기 실행하는 버전을 다른 기능으로 취하여 출력하는 함수이다.

   여기서 비동기 실행하는 버전을 다른 기능으로 취하여 출력하는 함수이다.

   var async = function (func) {
     return function () {
       var args = arguments;
       setTimeout(function () {
         func.apply(this, args);
       }, 0);
     };
   };
   

   그것은 비동기 기능을 만들 수있는 간단한 방법으로 사용된다 :

   var anyncFunction = async(function (callback) {
       doSomething();
       callback();
   });
   

   함수 자체가 자신의 구조를 가지고 있기 때문에 이것은 사용할 수있는 새로운 기능을 만들기 때문에도 (콜백가 추가되지는 기능에 이미)와 @ FIDER의 대답은 다릅니다.

5. ---

   5.편집 : 나는 완전히 질문을 오해. 브라우저에서 나는에서는 setTimeout을 사용합니다. 그것은 다른 스레드에서 실행하는 것이 중요한 경우에, 나는 웹 근로자를 사용합니다.

   편집 : 나는 완전히 질문을 오해. 브라우저에서 나는에서는 setTimeout을 사용합니다. 그것은 다른 스레드에서 실행하는 것이 중요한 경우에, 나는 웹 근로자를 사용합니다.

6. ---

   6.이 페이지는 비동기 자바 스크립트 기능을 만드는 기본 과정을 안내합니다.

   이 페이지는 비동기 자바 스크립트 기능을 만드는 기본 과정을 안내합니다.

   ES2017 때문에, 비동기 자바 스크립트 함수를 작성하기가 훨씬 더 쉽다. 또한 약속에 더 읽어야한다.

7. ---

   7.늦은하지만 ES6에서 소개 된 후 약속을 사용하기 쉬운 솔루션을 보여주기 위해, 그것은 쉽게 비동기 호출을 많이 처리합니다

   늦은하지만 ES6에서 소개 된 후 약속을 사용하기 쉬운 솔루션을 보여주기 위해, 그것은 쉽게 비동기 호출을 많이 처리합니다

   새 약속을 비동기 코드를 설정 :

   var asyncFunct = new Promise(function(resolve, reject) {
       $('#link').animate({ width: 200 }, 2000, function() {
           console.log("finished");                
           resolve();
       });             
   });
   

   세트 해결에 주 () 할 때 비동기 호출 완료. 그럼 당신은 당신이 약속) (내부 그 때는 비동기 호출이 완료된 후 실행하고자하는 코드를 추가합니다 :

   asyncFunct.then((result) => {
       console.log("Exit");    
   });
   

   여기의 단편이다 $ ( '# 링크'). ((기능을 클릭) { ( "입력") CONSOLE.LOG; VAR asyncFunct는 거부 새로운 약속 (기능 (결의를) {= $ ( '# 링크') 애니메이션 ({폭 : (200)}., 2000, 기능 () { 을 console.log ( "완료"); 결의(); }); }); asyncFunct.then ((결과) => { 을 console.log ( "종료"); }); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 링크 에 이동

   또는 JSFiddle

8. ---

   8.당신이 매개 변수를 사용하여 비동기 기능의 최대 수를 조절하려면 당신은 내가 빌드했습니다 간단한 비동기 노동자를 사용할 수 있습니다 :

   당신이 매개 변수를 사용하여 비동기 기능의 최대 수를 조절하려면 당신은 내가 빌드했습니다 간단한 비동기 노동자를 사용할 수 있습니다 :

   var BackgroundWorker = function(maxTasks) {
       this.maxTasks = maxTasks || 100;
       this.runningTasks = 0;
       this.taskQueue = [];
   };
   
   /* runs an async task */
   BackgroundWorker.prototype.runTask = function(task, delay, params) {
       var self = this;
       if(self.runningTasks >= self.maxTasks) {
           self.taskQueue.push({ task: task, delay: delay, params: params});
       } else {
           self.runningTasks += 1;
           var runnable = function(params) {
               try {
                   task(params);
               } catch(err) {
                   console.log(err);
               }
               self.taskCompleted();
           }
           // this approach uses current standards:
           setTimeout(runnable, delay, params);
       }
   }
   
   BackgroundWorker.prototype.taskCompleted = function() {
       this.runningTasks -= 1;
   
       // are any tasks waiting in queue?
       if(this.taskQueue.length > 0) {
           // it seems so! let's run it x)
           var taskInfo = this.taskQueue.splice(0, 1)[0];
           this.runTask(taskInfo.task, taskInfo.delay, taskInfo.params);
       }
   }
   

   이처럼 사용할 수 있습니다 :

   var myFunction = function() {
    ...
   }
   var myFunctionB = function() {
    ...
   }
   var myParams = { name: "John" };
   
   var bgworker = new BackgroundWorker();
   bgworker.runTask(myFunction, 0, myParams);
   bgworker.runTask(myFunctionB, 0, null);
   

9. ---

   9.

   Function.prototype.applyAsync = function(params, cb){
         var function_context = this;
         setTimeout(function(){
             var val = function_context.apply(undefined, params); 
             if(cb) cb(val);
         }, 0);
   }
   
   // usage
   var double = function(n){return 2*n;};
   var display = function(){console.log(arguments); return undefined;};
   double.applyAsync([3], display);
   

   다른 솔루션보다 근본적으로 다른 것은 아니지만, 내 솔루션은 몇 가지 추가 멋진의 일을 생각한다 :

   또한,의 유사성은 Function.prototype.apply의 나에게 적절한 내장 기능을 보인다.

10. ---

    10.궁금 곳 @pimvdb에 의해, 그냥 경우에 좋은 대답 다음 당신은 async.js 중 하나를 진정으로 비동기 기능을 제공하지 않습니다. 여기에 라이브러리의 주요 방법의 (매우) 버전을 박탈은 다음과 같습니다

    궁금 곳 @pimvdb에 의해, 그냥 경우에 좋은 대답 다음 당신은 async.js 중 하나를 진정으로 비동기 기능을 제공하지 않습니다. 여기에 라이브러리의 주요 방법의 (매우) 버전을 박탈은 다음과 같습니다

    function asyncify(func) { // signature: func(array)
        return function (array, callback) {
            var result;
            try {
                result = func.apply(this, array);
            } catch (e) {
                return callback(e);
            }
            /* code ommited in case func returns a promise */
            callback(null, result);
        };
    }
    

    함수가 처리 할 수있는 콜백 오류와 우아하게 손을에서 보호하지만, 코드가 다른 JS 함수와 동기로되도록.

11. ---

    11.불행하게도, 자바 스크립트는 비동기 기능을 제공하지 않습니다. 그것은 단지 하나의 하나 개의 스레드에서 작동합니다. 그러나 최신 브라우저의 대부분은 백그라운드에서 실행됩니다 그 결과를 반환 할 수 있습니다 두 번째 스크립트입니다 노동자를 제공합니다. 그래서, 나는 그것을 비동기 각 비동기 호출에 대한 작업자를 생성하는 기능을 실행하는 것이 유용하다고 생각하는 솔루션을했다.

    불행하게도, 자바 스크립트는 비동기 기능을 제공하지 않습니다. 그것은 단지 하나의 하나 개의 스레드에서 작동합니다. 그러나 최신 브라우저의 대부분은 백그라운드에서 실행됩니다 그 결과를 반환 할 수 있습니다 두 번째 스크립트입니다 노동자를 제공합니다. 그래서, 나는 그것을 비동기 각 비동기 호출에 대한 작업자를 생성하는 기능을 실행하는 것이 유용하다고 생각하는 솔루션을했다.

    아래의 코드는 백그라운드에서 호출 할 함수의 비동기가 포함되어 있습니다.

    Function.prototype.async = function(callback) {
        let blob = new Blob([ "self.addEventListener('message', function(e) { self.postMessage({ result: (" + this + ").apply(null, e.data) }); }, false);" ], { type: "text/javascript" });
        let worker = new Worker(window.URL.createObjectURL(blob));
        worker.addEventListener("message", function(e) {
            this(e.data.result);
        }.bind(callback), false);
        return function() {
            this.postMessage(Array.from(arguments));
        }.bind(worker);
    };
    

    이것은 사용에 대한 예입니다 :

    (function(x) {
        for (let i = 0; i < 999999999; i++) {}
            return x * 2;
    }).async(function(result) {
        alert(result);
    })(10);
    

    이 비 동시성의 데모로 시간이 걸릴 엄청난 수에 대한을 반복하는 기능을 실행 한 다음 통과 수의 두 배를 가져옵니다. 비동기 방법은 백그라운드에서 원하는 함수를 호출하는 기능을 제공하며, 비동기의 매개 변수가 고유 매개 변수의 수익을 콜백으로 그 어떤에서 제공됩니다. 그래서 콜백 함수에 나는 결과를 알려줍니다.

12. ---

    12.MDN은 "이"보존의 setTimeout의 사용에 대한 좋은 사례가있다.

    MDN은 "이"보존의 setTimeout의 사용에 대한 좋은 사례가있다.

    다음과 같은 :

    function doSomething() {
        // use 'this' to handle the selected element here
    }
    
    $(".someSelector").each(function() {
        setTimeout(doSomething.bind(this), 0);
    });
    

from https://stackoverflow.com/questions/9516900/how-can-i-create-an-asynchronous-function-in-javascript by cc-by-sa and MIT license