我需要做的就是在当前函数执行结束时执行一个回调函数。
function LoadData()
{
alert('The data has been loaded');
//Call my callback with parameters. For example,
//callback(loadedData , currentObject);
}
这个函数的消费者应该是这样的：
object.LoadData(success);
function success(loadedData , currentObject)
{
//Todo: some action here
}
我该如何实现？
【问题讨论】：
object.LoadData(success) 调用必须在 function success 定义之后。否则，你会得到一个错误，告诉你函数没有定义。
标签： javascript callback
实际上，您的代码几乎可以按原样运行，只需将您的回调声明为参数，您就可以使用参数名称直接调用它。
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);
这将调用doSomething，它将调用foo，它会提醒“stuff going here”。
请注意，传递函数reference (foo) 非常重要，而不是调用函数并传递其结果 (foo())。在您的问题中，您做得正确，但值得指出，因为这是一个常见错误。
有时您想调用回调，以便它看到this 的特定值。您可以使用 JavaScript call 函数轻松做到这一点：
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`
你也可以传递参数：
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`
有时，将您想要作为回调函数的参数作为数组而不是单独传递是很有用的。你可以使用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`
【讨论】：
setTimeout()。答案是将回调包装在一个闭包中：doSomething(function(){foo('this','should','work')})
在尝试执行回调之前确保回调是一个实际的函数是个好习惯：
if (callback && typeof(callback) === "function") {
callback();
}
【讨论】：
if(typeof callback == "function") 将得到相同的结果。
callback && 的意义所在...
我的 2 美分。相同但不同...
<script>
dosomething("blaha", function(){
alert("Yay just like jQuery callbacks!");
});
function dosomething(damsg, callback){
alert(damsg);
if(typeof callback == "function")
callback();
}
</script>
【讨论】：
function loadData(callback) {
//execute other requirement
if(callback && typeof callback == "function"){
callback();
}
}
loadData(function(){
//execute callback
});
【讨论】：
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 !");
});
===============================================
结果是：
hello world !
【讨论】：
有些答案虽然正确，但可能有点难以理解。下面是一个通俗易懂的例子：
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);
回调的意思是，在显示console.log的用户列表之前，总是将“Jake”添加到用户中。
【讨论】：
如果你想在某事完成后执行一个函数。一个好的解决方案是监听事件。
比如我会用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')
调度员：
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)
}))
}
}
编码愉快！
p/s：我的代码缺少处理一些错误异常
【讨论】：
当调用回调函数时，我们可以像下面这样使用它：
consumingFunction(callbackFunctionName)
例子：
// 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
这是Codepend 的完整示例。
【讨论】：
function LoadData(callback)
{
alert('the data have been loaded');
callback(loadedData, currentObject);
}
【讨论】：
试试：
function LoadData (callback)
{
// ... Process whatever data
callback (loadedData, currentObject);
}
函数在JavaScript中是一流的；你可以把它们传过来。
【讨论】：
function login(email, password, callback) {
//verify the user
const users = [
{ email: "abc@gmail.com", password: "123" },
{ email: "xyz@gmail.com", password: "xyz" }
];
const user = users.find(
(user) => user.email === email && user.password === password
);
callback(user);
`enter code here`}
function redirect(user) {
if (user) {
//user is successfully logged in
console.log("user is successfully logged in ");
} else {
console.log("Incorrect credentials ");
}
}
login("abc@gmail.com", "123", redirect);
希望这个例子对想了解JS中回调的大家有所帮助
【讨论】：