在 JavaScript 中创建自定义回调
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2190850/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create a custom callback in JavaScript
提问by Amgad Fahmi
All I need to do is to execute a callback function when my current function execution ends.
我需要做的就是在当前函数执行结束时执行回调函数。
function LoadData()
{
alert('The data has been loaded');
//Call my callback with parameters. For example,
//callback(loadedData , currentObject);
}
A consumer for this function should be like this:
这个函数的消费者应该是这样的：
object.LoadData(success);
function success(loadedData , currentObject)
{
//Todo: some action here
}
How do I implement this?
我该如何实施？
回答by T.J. Crowder
Actually, your code will pretty much work as is, just declare your callback as an argument and you can call it directly using the argument name.
实际上，您的代码几乎可以按原样工作，只需将您的回调声明为参数，您就可以使用参数名称直接调用它。
The basics
基础知识
function doSomething(callback) {
// ...
// Call the callback
callback('stuff', 'goes', 'here');
}
function foo(a, b, c) {
// I'm the callback
alert(a + " " + b + " " + c);
}
doSomething(foo);
That will call doSomething, which will call foo, which will alert "stuff goes here".
那将调用doSomething，它将调用foo，它会提醒“东西到这里了”。
Note that it's very important to pass the function reference(foo), rather than calling the function and passing its result (foo()). In your question, you do it properly, but it's just worth pointing out because it's a common error.
请注意，传递函数引用( foo)非常重要，而不是调用函数并传递其结果 ( foo())。在你的问题中，你做得对，但值得指出，因为这是一个常见的错误。
More advanced stuff
更高级的东西
Sometimes you want to call the callback so it sees a specific value for this. You can easily do that with the JavaScript callfunction:
有时您想调用回调，以便它看到 的特定值this。您可以使用 JavaScriptcall函数轻松做到这一点：
function Thing(name) {
this.name = name;
}
Thing.prototype.doSomething = function(callback) {
// Call our callback, but using our own instance as the context
callback.call(this);
}
function foo() {
alert(this.name);
}
var t = new Thing('Joe');
t.doSomething(foo); // Alerts "Joe" via `foo`
You can also pass arguments:
您还可以传递参数：
function Thing(name) {
this.name = name;
}
Thing.prototype.doSomething = function(callback, salutation) {
// Call our callback, but using our own instance as the context
callback.call(this, salutation);
}
function foo(salutation) {
alert(salutation + " " + this.name);
}
var t = new Thing('Joe');
t.doSomething(foo, 'Hi'); // Alerts "Hi Joe" via `foo`
Sometimes it's useful to pass the arguments you want to give the callback as an array, rather than individually. You can use applyto do that:
有时，将要提供给回调的参数作为数组而不是单独传递很有用。你可以apply用来做到这一点：
function Thing(name) {
this.name = name;
}
Thing.prototype.doSomething = function(callback) {
// Call our callback, but using our own instance as the context
callback.apply(this, ['Hi', 3, 2, 1]);
}
function foo(salutation, three, two, one) {
alert(salutation + " " + this.name + " - " + three + " " + two + " " + one);
}
var t = new Thing('Joe');
t.doSomething(foo); // Alerts "Hi Joe - 3 2 1" via `foo`
回答by Donald A Nummer Jr
It is good practice to make sure the callback is an actual function before attempting to execute it:
在尝试执行之前确保回调是一个实际的函数是一种很好的做法：
if (callback && typeof(callback) === "function") {
callback();
}
回答by K. Kilian Lindberg
My 2 cent. Same but different...
我的2美分。相同但不同...
<script>
dosomething("blaha", function(){
alert("Yay just like jQuery callbacks!");
});
function dosomething(damsg, callback){
alert(damsg);
if(typeof callback == "function")
callback();
}
</script>
回答by arun bahal
function loadData(callback) {
//execute other requirement
if(callback && typeof callback == "function"){
callback();
}
}
loadData(function(){
//execute callback
});
回答by Eyad Farra
function callback(e){
return e;
}
var MyClass = {
method: function(args, callback){
console.log(args);
if(typeof callback == "function")
callback();
}
}
==============================================
==============================================
MyClass.method("hello",function(){
console.log("world !");
});
==============================================
==============================================
Result is:
结果是：
hello world !
回答by hien
If you want to execute a function when something is done. One of a good solution is to listen to events.
For example, I'll implement a Dispatcher, a DispatcherEventclass with ES6,then:
如果你想在某事完成时执行一个函数。一个好的解决方案是监听事件。例如，我将使用 ES6实现Dispatcher一个DispatcherEvent类，然后：
let Notification = new Dispatcher()
Notification.on('Load data success', loadSuccessCallback)
const loadSuccessCallback = (data) =>{
...
}
//trigger a event whenever you got data by
Notification.dispatch('Load data success')
Dispatcher:
调度员：
class Dispatcher{
constructor(){
this.events = {}
}
dispatch(eventName, data){
const event = this.events[eventName]
if(event){
event.fire(data)
}
}
//start listen event
on(eventName, callback){
let event = this.events[eventName]
if(!event){
event = new DispatcherEvent(eventName)
this.events[eventName] = event
}
event.registerCallback(callback)
}
//stop listen event
off(eventName, callback){
const event = this.events[eventName]
if(event){
delete this.events[eventName]
}
}
}
DispatcherEvent:
调度器事件：
class DispatcherEvent{
constructor(eventName){
this.eventName = eventName
this.callbacks = []
}
registerCallback(callback){
this.callbacks.push(callback)
}
fire(data){
this.callbacks.forEach((callback=>{
callback(data)
}))
}
}
Happy coding!
快乐编码！
p/s: My code is missing handle some error exceptions
p/s: 我的代码丢失处理一些错误异常
回答by Eric Tan
When calling the callback function, we could use it like below:
在调用回调函数时，我们可以像下面这样使用它：
consumingFunction(callbackFunctionName)
consumingFunction(callbackFunctionName)
Example:
例子：
// Callback function only know the action,
// but don't know what's the data.
function callbackFunction(unknown) {
console.log(unknown);
}
// This is a consuming function.
function getInfo(thenCallback) {
// When we define the function we only know the data but not
// the action. The action will be deferred until excecuting.
var info = 'I know now';
if (typeof thenCallback === 'function') {
thenCallback(info);
}
}
// Start.
getInfo(callbackFunction); // I know now
This is the Codependwith full example.
这是带有完整示例的Codepend。
回答by Dan Bray
Some of the answers, while correct may be a little tricky to understand. Here is an example in layman's terms:
一些答案虽然正确，但可能有点难以理解。这是一个通俗易懂的例子：
var users = ["Sam", "Ellie", "Bernie"];
function addUser(username, callback)
{
setTimeout(function()
{
users.push(username);
callback();
}, 200);
}
function getUsers()
{
setTimeout(function()
{
console.log(users);
}, 100);
}
addUser("Jake", getUsers);
The callback means, "Jake" is always added to the users before displaying the list of users with console.log.
回调意味着“Jake”总是在显示用户列表之前添加到用户中console.log。
回答by Thomas Bonini
function LoadData(callback)
{
alert('the data have been loaded');
callback(loadedData, currentObject);
}
回答by K Prime
Try:
尝试：
function LoadData (callback)
{
// ... Process whatever data
callback (loadedData, currentObject);
}
Functions are first class in JavaScript; you can just pass them around.
函数是JavaScript中的第一类；你可以把它们传递出去。
