如何在 Javascript 中创建异步函数？

你可以使用计时器:

setTimeout( yourFn, 0 );

(其中 yourFn是对函数的引用)

或者，与 Lodash一起:

_.defer( yourFn );

将调用 func的时间推迟到当前调用堆栈清除之后。当调用 func时，任何附加参数都被提供给它。

你不能创建一个真正自定义的异步函数，你最终必须利用本地提供的技术，比如:

• setInterval
• setTimeout
• requestAnimationFrame
• XMLHttpRequest
• WebSocket
• Worker
• 某些 HTML5 API，如文件 API、 Web 数据库 API
• 支持 onload的技术
• 还有很多其他人

事实上，对于动画 jQuery 用途 setInterval。

This page walks you through the basics of creating an async javascript function.

自 ES2017以来，异步 javaccript 函数更容易编写。您还应该阅读更多关于 我保证的内容。

在这里你有简单的解决方案(其他人写关于它) 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 23’或’12 x 3’或’123 x’) :

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

测试2(将始终输出’x1’) :

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

这个函数执行时超时为0-它将模拟异步任务

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的相似性对我来说似乎是合适的。

MDN 在使用 setTimeout 时有一个 好榜样，保留“ this”。

如下所示:

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


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

如果你想使用参数和调节异步函数的最大数量，你可以使用我构建的一个简单的异步工作器:

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

下面是一个接受另一个函数并输出运行异步的版本的函数。

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

它被用作创建异步函数的一种简单方法:

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

这与@fider 的答案不同，因为函数本身有自己的结构(没有添加回调，它已经在函数中了) ，还因为它创建了一个可以使用的新函数。

紧挨着@pilvdb 给出的最佳答案，如果您想知道的话，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 函数一样是同步的。