JavaScript:コールバック関数にパラメーターを渡す


289

コールバックとして使用される関数にパラメーターを渡そうとしていますが、どうすればよいですか?

function tryMe (param1, param2) {
    alert (param1 + " and " + param2);
}

function callbackTester (callback, param1, param2) {
    callback (param1, param2);
}

callbackTester (tryMe, "hello", "goodbye");

9
あなたがやっていることはうまくいくはずです。どのような問題がありますか?
Daniel Vassallo、2011

1
コードは正常に動作しますが、問題は何ですか?
Sarfraz

1
それはうまくいくはずです... jsfiddle.net/QXQZj
Hristo

メインコードの構文に誤りがあったのは申し訳ありません
。JavaScriptで

コールバックにパラメーターを追加したいが、それを呼び出しているものを変更できない場合(引数の順序を変更する権限がないなど)、JSバインドを使用してコールバックパラメーターの一部を事前にバインドできます。この回答:stackoverflow.com/a/28120741/1695680
ThorSummoner 2015年

回答:


253

もう少し一般的なものが必要な場合は、次のように引数変数を使用できます。

function tryMe (param1, param2) {
    alert(param1 + " and " + param2);
}

function callbackTester (callback) {
    callback (arguments[1], arguments[2]);
}

callbackTester (tryMe, "hello", "goodbye");

しかし、それ以外の場合、例は正常に機能します(テスターのコールバックの代わりに引数[0]を使用できます)


53
一般的な精神でいるcallback.apply(arguments)限り、関数本体callbackTesterは2つの引数のシナリオを超えて拡張可能です。
スティーブン

1
申し訳ありませんが、これはメインコードの構文エラーでした。JavaScriptでコールバックを使用するのはこれが初めてであるためだと思いました。これは問題ではないことを理解し、優れた例を表示するのに役立ちました。
vitto

3
参考までに、匿名関数(Marimuthuの回答)または.bind()(Andyの回答)を使用すると、コールバックに引数を渡す方法がより明確になります。
アントワーヌ2015年

203

これも機能します:

// callback function
function tryMe (param1, param2) { 
    alert (param1 + " and " + param2); 
} 

// callback executer 
function callbackTester (callback) { 
    callback(); 
} 

// test function
callbackTester (function() {
    tryMe("hello", "goodbye"); 
}); 

別のシナリオ:

// callback function
function tryMe (param1, param2, param3) { 
    alert (param1 + " and " + param2 + " " + param3); 
} 

// callback executer 
function callbackTester (callback) { 
//this is the more obivous scenario as we use callback function
//only when we have some missing value
//get this data from ajax or compute
var extraParam = "this data was missing" ;

//call the callback when we have the data
    callback(extraParam); 
} 

// test function
callbackTester (function(k) {
    tryMe("hello", "goodbye", k); 
}); 

2
これは、無名関数が次のようにパラメーターを渡すことができるため、うまく機能します。callbackTester(function(data){tryMe(data、 "hello"、 "goodbye");});
マイケル・ハリリ2014

また、コールバックが実際に関数であることも確認します。if (typeof window[callback] == 'function') window[callback].call(this);
GreeKatrina

63

あなたの質問は不明確です。これをもっと簡単に行う方法を尋ねる場合は、Function.prototypeのメンバーであるECMAScript 5版のメソッド.bind()を確認する必要があります。それを使用すると、次のようなことができます:

function tryMe (param1, param2) {
    alert (param1 + " and " + param2);
}

function callbackTester (callback) {
    callback();
}

callbackTester(tryMe.bind(null, "hello", "goodbye"));

次のコードを使用することもできます。これは、現在のブラウザーで使用できない場合にメソッドを追加します。

// From Prototype.js
if (!Function.prototype.bind) { // check if native implementation available
  Function.prototype.bind = function(){ 
    var fn = this, args = Array.prototype.slice.call(arguments),
        object = args.shift(); 
    return function(){ 
      return fn.apply(object, 
        args.concat(Array.prototype.slice.call(arguments))); 
    }; 
  };
}

bind() -PrototypeJSドキュメント


関心のうち、違いは何だArray.prototype.slice.call(arguments)とはarguments.slice()
sje397 2010

7
@ sje397:引数は*実際の*配列ではないため、slice()メソッドはありません。ただし、Array.prototypeslice()メソッドは意図的に汎用的であるため、数値インデックスと長さプロパティを持つ任意のオブジェクトを渡すことができ、それは機能します。
Andy E

2
これが最もエレガントな答えです
アントワーヌ2015年

この.bind()は非常に優れており、コールバックの使用とシンプルさを大幅に拡張します。それを理解するための基本的なサンプルとして、次の場合:f = function(arg1,arg2){alert(arg1+arg2);}.bind(this,"abc"); f("def") // Gives "abcdef"
Le Droid

これは本当に大事な答えです。素晴らしく、私にとってはうまくいきます。ありがとうございました:)
Vishnu Mishra

13

特定の数のパラメーターを持つコード以外の何かによって呼び出されるコールバックがあり、追加のパラメーターを渡したい場合、ラッパー関数をコールバックとして渡し、ラッパー内で追加のパラメーターを渡すことができます。

function login(accessedViaPopup) {
    //pass FB.login a call back function wrapper that will accept the
    //response param and then call my "real" callback with the additional param
    FB.login(function(response){
        fb_login_callback(response,accessedViaPopup);
    });
}

//handles respone from fb login call
function fb_login_callback(response, accessedViaPopup) {
    //do stuff
}

9

コールバック関数に渡されるパラメーターの数がわからない場合は、関数を使用してくださいapply

function tryMe (param1, param2) {
  alert (param1 + " and " + param2);
}

function callbackTester(callback,params){
    callback.apply(this,params);
}

callbackTester(tryMe,['hello','goodbye']);

4

「親」関数が呼び出されたときに評価されないように、関数ラッパー内で引数として渡される「子」関数をラップします。

function outcome(){
    return false;
}

function process(callbackSuccess, callbackFailure){
    if ( outcome() )
        callbackSuccess();
    else
        callbackFailure();
}

process(function(){alert("OKAY");},function(){alert("OOPS");})

4

任意の数のパラメーターとコールバックコンテキストを含む質問のコード:

function SomeFunction(name) {
    this.name = name;
}
function tryMe(param1, param2) {
    console.log(this.name + ":  " + param1 + " and " + param2);
}
function tryMeMore(param1, param2, param3) {
    console.log(this.name + ": " + param1 + " and " + param2 + " and even " + param3);
}
function callbackTester(callback, callbackContext) {
    callback.apply(callbackContext, Array.prototype.splice.call(arguments, 2));
}
callbackTester(tryMe, new SomeFunction("context1"), "hello", "goodbye");
callbackTester(tryMeMore, new SomeFunction("context2"), "hello", "goodbye", "hasta la vista");

// context1: hello and goodbye
// context2: hello and goodbye and even hasta la vista

2

この単純な例のように、カリー化された関数を使用します。

const BTN = document.querySelector('button')
const RES = document.querySelector('p')

const changeText = newText => () => {
  RES.textContent = newText
}

BTN.addEventListener('click', changeText('Clicked!'))
<button>ClickMe</button>
<p>Not clicked<p>


0

コールバックが独自のコードではなく他の関数によって呼び出され、パラメーターを追加するシナリオの新しいバージョン。

たとえば、成功コールバックとエラーコールバックを含むネストされた呼び出しが多数あるとします。この例では角度プロミスを使用しますが、この目的のために、コールバックを含むすべてのJavaScriptコードは同じです。

someObject.doSomething(param1, function(result1) {
  console.log("Got result from doSomething: " + result1);
  result.doSomethingElse(param2, function(result2) {
    console.log("Got result from doSomethingElse: " + result2);
  }, function(error2) {
    console.log("Got error from doSomethingElse: " + error2);
  });
}, function(error1) {
  console.log("Got error from doSomething: " + error1);
});

ここで、エラーをログに記録する関数を定義し、デバッグのためにエラーの発生元を保持して、コードを整理することができます。これは、コードをリファクタリングする方法です。

someObject.doSomething(param1, function (result1) {
  console.log("Got result from doSomething: " + result1);
  result.doSomethingElse(param2, function (result2) {
    console.log("Got result from doSomethingElse: " + result2);
  }, handleError.bind(null, "doSomethingElse"));
}, handleError.bind(null, "doSomething"));

/*
 * Log errors, capturing the error of a callback and prepending an id
 */
var handleError = function (id, error) {
  var id = id || "";
  console.log("Got error from " + id + ": " + error);
};

呼び出し側の関数は、コールバック関数のパラメーターの後にエラーパラメーターを追加します。


0

私は同じことを探していて、解決策が得られましたが、これは誰かがこれをやりたい場合の簡単な例です。

var FA = function(data){
   console.log("IN A:"+data)
   FC(data,"LastName");
};
var FC = function(data,d2){
   console.log("IN C:"+data,d2)
};
var FB = function(data){
   console.log("IN B:"+data);
    FA(data)
};
FB('FirstName')

こちらの他の質問にも投稿


0

コールバックを使用する非常に単純なNode.jsスタイルの例を示します。

/**
 * Function expects these arguments: 
 * 2 numbers and a callback function(err, result)
 */
var myTest = function(arg1, arg2, callback) {
  if (typeof arg1 !== "number") {
    return callback('Arg 1 is not a number!', null); // Args: 1)Error, 2)No result
  }
  if (typeof arg2 !== "number") {
    return callback('Arg 2 is not a number!', null); // Args: 1)Error, 2)No result
  }
  if (arg1 === arg2) {
    // Do somethign complex here..
    callback(null, 'Actions ended, arg1 was equal to arg2'); // Args: 1)No error, 2)Result
  } else if (arg1 > arg2) {
    // Do somethign complex here..
    callback(null, 'Actions ended, arg1 was > from arg2'); // Args: 1)No error, 2)Result
  } else {
    // Do somethign else complex here..
    callback(null, 'Actions ended, arg1 was < from arg2'); // Args: 1)No error, 2)Result
  }
};


/**
 * Call it this way: 
 * Third argument is an anonymous function with 2 args for error and result
 */
myTest(3, 6, function(err, result) {
  var resultElement = document.getElementById("my_result");
  if (err) {
    resultElement.innerHTML = 'Error! ' + err;
    resultElement.style.color = "red";
    //throw err; // if you want
  } else {
    resultElement.innerHTML = 'Result: ' + result;
    resultElement.style.color = "green";
  }
});

結果をレンダリングするHTML:

<div id="my_result">
  Result will come here!
</div>

ここで試してみることができます:https : //jsfiddle.net/q8gnvcts/-たとえば、数値の代わりに文字列を渡そうとします:myTest( 'some string'、6、function(err、result) ..そして結果を確認します。

この例が、コールバック関数の非常に基本的な考え方を表すものであることを願っています。


0
function tryMe(param1, param2) {
  console.log(param1 + " and " + param2);
}

function tryMe2(param1) {
  console.log(param1);
}

function callbackTester(callback, ...params) {
  callback(...params);
}



callbackTester(tryMe, "hello", "goodbye");

callbackTester(tryMe2, "hello");

スプレッド構文の詳細を読む


0
//Suppose function not taking any parameter means just add the GetAlterConfirmation(function(result) {});
GetAlterConfirmation('test','messageText',function(result) {
                        alert(result);
    }); //Function into document load or any other click event.


function GetAlterConfirmation(titleText, messageText, _callback){
         bootbox.confirm({
                    title: titleText,
                    message: messageText,
                    buttons: {
                        cancel: {
                            label: '<i class="fa fa-times"></i> Cancel'
                        },
                        confirm: {
                            label: '<i class="fa fa-check"></i> Confirm'
                        }
                    },
                    callback: function (result) {
                        return _callback(result); 
                    }
                });

1
あなたがしていることとその理由の説明を追加してください:)
Preston Badeer

さて、私は私の次の答えから行います、これは私の最初の答えなので、上記のため申し訳ありません。
Santhos Jery
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.