[javascript] JavaScript로 커스텀 콜백 만들기

실제로 코드는 거의 작동합니다. 콜백을 인수로 선언하면 인수 이름을 사용하여 직접 호출 할 수 있습니다.

기본

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하면 “건물이 여기로 간다”는 경고를 보냅니다.

함수를 호출하고 결과 ( )를 전달하는 대신 함수 참조 ( 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`

답변

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

  callback();
}

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

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

class DispatcherEvent{
  constructor(eventName){
    this.eventName = eventName
    this.callbacks = []
  }

  registerCallback(callback){
    this.callbacks.push(callback)
  }

  fire(data){
    this.callbacks.forEach((callback=>{
      callback(data)
    }))
  }
}

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