Tạo một cuộc gọi lại tùy chỉnh trong JavaScript

Tất cả những gì tôi cần làm là thực thi chức năng gọi lại khi việc thực hiện chức năng hiện tại của tôi kết thúc.

function LoadData() 
{
    alert('The data has been loaded');
    //Call my callback with parameters. For example,
    //callback(loadedData , currentObject);
}

Một người tiêu dùng cho chức năng này nên như thế này:

object.LoadData(success);

function success(loadedData , currentObject) 
{
  //Todo: some action here 
}

Làm thế nào để tôi thực hiện điều này?

Trên thực tế, mã của bạn sẽ hoạt động khá nhiều, chỉ cần khai báo cuộc gọi lại của bạn như là một đối số và bạn có thể gọi nó trực tiếp bằng tên đối số.

Những thứ cơ bản

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

Điều đó sẽ gọi doSomething, sẽ gọi foo, sẽ cảnh báo "công cụ ở đây".

Lưu ý rằng việc truyền tham chiếu hàm ( foo) là rất quan trọng , thay vì gọi hàm và truyền kết quả của nó ( foo()). Trong câu hỏi của bạn, bạn làm điều đó đúng, nhưng nó chỉ đáng để chỉ ra vì đó là một lỗi phổ biến.

Những thứ cao cấp hơn

Đôi khi bạn muốn gọi lại để nó thấy một giá trị cụ thể cho this. Bạn có thể dễ dàng làm điều đó với callchức năng JavaScript :

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`

Bạn cũng có thể truyền đối số:

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`

Đôi khi nó hữu ích để vượt qua các đối số bạn muốn đưa ra cuộc gọi lại dưới dạng một mảng, thay vì riêng lẻ. Bạn có thể sử dụng applyđể làm điều đó:

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`

Đó là một thực tế tốt để đảm bảo gọi lại là một chức năng thực tế trước khi cố gắng thực hiện nó:

if (callback && typeof(callback) === "function") {

  callback();
}

2 xu của tôi. Giống nhau nhưng khác nhau ...

<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 !");
});

==============================================

Kết quả là:

hello world !

Nếu bạn muốn thực thi một chức năng khi một cái gì đó được thực hiện. Một trong những giải pháp tốt là lắng nghe các sự kiện. Ví dụ: tôi sẽ triển khai một Dispatcher, một DispatcherEventlớp với ES6, sau đó:

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

Điều phối:

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

Chúc mừng mã hóa!

p / s: Mã của tôi bị thiếu xử lý một số trường hợp ngoại lệ lỗi

function LoadData(callback) 
{
    alert('the data have been loaded');
    callback(loadedData, currentObject);
}

Khi gọi hàm gọi lại, chúng ta có thể sử dụng nó như dưới đây:

consumingFunction(callbackFunctionName)

Thí dụ:

// 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

Đây là Codepend với ví dụ đầy đủ.

Một số câu trả lời, trong khi chính xác có thể hơi khó hiểu. Đây là một ví dụ trong các điều khoản của giáo dân:

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

Gọi lại có nghĩa là, "Jake" luôn được thêm vào người dùng trước khi hiển thị danh sách người dùng console.log.

Nguồn (YouTube)

Thử:

function LoadData (callback)
{
    // ... Process whatever data
    callback (loadedData, currentObject);
}

Các hàm là lớp đầu tiên trong JavaScript ; bạn chỉ có thể vượt qua chúng xung quanh.