이 코드를 확인하십시오 :
<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()
답변
진정한 사용자 정의 비동기 기능을 만들 수 없습니다. 결국 다음과 같이 기본적으로 제공되는 기술을 활용해야합니다.
setIntervalsetTimeoutrequestAnimationFrameXMLHttpRequestWebSocketWorker- 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
