Javascript에서 비동기 함수를 작성하는 방법

이 코드를 확인하십시오 :

<a href="#" id="link">Link</a>
<span>Moving</span>

$('#link').click(function () {
    console.log("Enter");
    $('#link').animate({ width: 200 }, 2000, function() {
         console.log("finished");            
    });    
    console.log("Exit");    
});

콘솔에서 볼 수 있듯이 "애니메이션"기능은 비동기식이며 이벤트 핸들러 블록 코드의 흐름을 "포크"합니다. 사실로 :

$('#link').click(function () {
    console.log("Enter");
    asyncFunct();
    console.log("Exit");    
});

function asyncFunct() {
    console.log("finished");
}

블록 코드의 흐름을 따르십시오!

function asyncFunct() { }이 동작으로 내 것을 만들려면 javascript / jquery로 어떻게 할 수 있습니까? 나는 사용하지 않고 전략이 있다고 생각 setTimeout()

진정한 사용자 정의 비동기 기능을 만들 수 없습니다. 결국 다음과 같이 기본적으로 제공되는 기술을 활용해야합니다.

• setInterval
• setTimeout
• requestAnimationFrame
• XMLHttpRequest
• WebSocket
• Worker
• File API, Web Database API와 같은 일부 HTML5 API
• 지원하는 기술 onload
• ... 많은 다른 사람

실제로 jQuery 는 애니메이션에을 사용합니다setInterval .

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

setTimeout( yourFn, 0 );

(여기서 yourFn함수에 대한 참조가 있습니다)

또는 Lodash 와 함께 :

_.defer( yourFn );

func현재 호출 스택이 지워질 때까지 호출을 연기합니다 . 추가 인수는 func호출 될 때 제공 됩니다.

여기에 간단한 해결책이 있습니다 (다른 것에 대해 쓰십시오) http://www.benlesh.com/2012/05/calling-javascript-function.html

그리고 여기 준비된 솔루션이 있습니다.

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

테스트 1 ( '1 x 2 3'또는 '1 2 x 3'또는 '1 2 3 x'출력 가능 ) :

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

테스트 2 ( 항상 'x 1'출력 ) :

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

이 함수는 타임 아웃 0으로 실행됩니다. 비동기 작업을 시뮬레이션합니다

다음은 다른 기능을 수행하고 비동기를 실행하는 버전을 출력하는 기능입니다.

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

비동기 함수를 만드는 간단한 방법으로 사용됩니다.

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

함수 자체에는 자체 구조 (콜백이 추가되지 않고 이미 함수에 있음)가 있고 사용할 수있는 새로운 함수를 생성하기 때문에 @fider의 대답과 다릅니다.

편집 : 나는 질문을 완전히 오해했습니다. 브라우저에서을 사용 setTimeout합니다. 다른 스레드에서 실행하는 것이 중요하다면 Web Workers를 사용 합니다.

늦었지만 ES6promises 도입 후 사용하는 쉬운 솔루션을 보여주기 위해 비동기 호출을 훨씬 쉽게 처리합니다.

새로운 약속에서 비동기 코드를 설정합니다.

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

resolve()비동기 호출이 완료 될 때 설정해야합니다 .
그런 다음 .then()약속 내 에서 비동기 호출이 완료된 후 실행할 코드를 추가하십시오 .

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

다음은 그 스 니펫입니다.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="link">Link</a>
<span>Moving</span>

또는 JSFiddle

이 페이지 는 비동기 자바 스크립트 함수 생성의 기본 사항을 안내합니다.

ES2017부터 비동기 javacript 함수를 작성하는 것이 훨씬 쉽습니다. 또한 Promises 에 대한 자세한 내용을 읽어보십시오 .

매개 변수를 사용하고 최대 비동기 함수 수를 조정하려면 간단한 비동기 작업자를 사용할 수 있습니다.

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);

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더 좋은 방법으로 호출 할 수 있도록 추가되었습니다.

또한 내장 함수와의 유사성 Function.prototype.apply이 나에게 적합합니다.

@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 함수와 동일합니다.

불행히도 JavaScript는 비동기 기능을 제공하지 않습니다. 단일 스레드에서만 작동합니다. 그러나 대부분의 최신 브라우저는 Workers를 제공합니다. 이는 백그라운드에서 실행되어 결과를 반환 할 수있는 두 번째 스크립트입니다. 그래서 나는 비동기식으로 함수를 실행하여 각 비동기 호출에 대한 작업자를 만드는 것이 유용하다고 생각하는 솔루션에 도달했습니다.

아래 코드에는 백그라운드에서 호출 하는 함수 가 포함되어 있습니다 async .

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);

이 함수 for는 비동기 성을 나타내는데 시간을 내기 위해 엄청난 수의 a를 반복 한 다음 전달 된 수의 두 배를 얻는 함수를 실행합니다 . 이 async메소드는 function백그라운드에서 원하는 함수를 호출하는 함수를 제공 하며 고유 한 매개 변수에서 async콜백의 매개 변수로 제공되는 함수를 제공 return합니다. 콜백 함수 alert에서 결과입니다.

MDN에는 "this"를 유지하는 setTimeout을 사용 하는 좋은 예가 있습니다.

다음과 같이

function doSomething() {
    // use 'this' to handle the selected element here
}

$(".someSelector").each(function() {
    setTimeout(doSomething.bind(this), 0);
});