在 JavaScript 中创建自定义回调

IT技术 javascript callback
2021-01-28 02:03:52

我需要做的就是在当前函数执行结束时执行回调函数。

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 
}

我该如何实施?

6个回答

实际上,您的代码几乎可以按原样工作,只需将您的回调声明为参数,您就可以使用参数名称直接调用它。

基础

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您可以使用 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`

您还可以传递参数:

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`
@TiTaN:这很奇怪,将参数传递给回调并没有什么特别之处。您传递给函数的回调引用与其他任何函数引用一样是一个函数引用,您可以用它做所有正常的事情。
2021-03-17 02:03:52
@Webwoman - 这取决于您的用例。您可以将它作为参数传递,或将其包含在某种设置/选项对象中,或其他几个选项中的任何一个。
2021-03-21 02:03:52
有人将 TiTaN 指向一个讨论上述问题的线程(最好是在 SO 上),我今天的搜索功能很弱。
2021-04-06 02:03:52
@每个回答的人:我认为 TiTaN 的问题是他不知道如何将需要参数的函数传递到不传递任何参数的回调中。setTimeout()答案是将回调包装在一个闭包中:doSomething(function(){foo('this','should','work')})
2021-04-08 02:03:52
我知道如果我没有像您编写的示例那样的任何参数,它会起作用,但是当我尝试传递带有参数的函数时,它会抛出异常并告诉我该函数未定义
2021-04-10 02:03:52

在尝试执行之前确保回调是一个实际的函数是一种很好的做法:

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

  callback();
}
是的,但是如果没有回调,为什么还要麻烦 typeof-ing 呢?这就是callback && ...的重点
2021-04-01 02:03:52
if(typeof callback == "function") 将有相同的结果。
2021-04-05 02:03:52

我的2美分。相同但不同...

<script>
    dosomething("blaha", function(){
        alert("Yay just like jQuery callbacks!");
    });


    function dosomething(damsg, callback){
        alert(damsg);
        if(typeof callback == "function") 
        callback();
    }
</script>
我喜欢这个片段,我正在寻找这个
2021-03-26 02:03:52
function loadData(callback) {

    //execute other requirement

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

loadData(function(){

   //execute callback

});
我喜欢这个答案,它的 str8 向前演示了人们想要看到的内容。
2021-03-28 02:03:52
请考虑编辑您的帖子,以添加更多关于您的代码的作用以及为什么它会解决问题的解释。大多数只包含代码(即使它正在工作)的答案通常不会帮助 OP 理解他们的问题。然而,在这种情况下,这是一个非常古老的问题,已经发布了备受推崇的答案,当有新的问题需要更多关注时,你可能不值得你回答这个问题。
2021-03-31 02:03:52
   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 !