जावास्क्रिप्ट: मापदंडों को कॉलबैक फ़ंक्शन में पास करना

Question

मैं कॉलबैक के रूप में उपयोग किए जाने वाले फ़ंक्शन के लिए कुछ पैरामीटर पास करने की कोशिश कर रहा हूं, मैं यह कैसे कर सकता हूं?

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

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

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

Comments

आप जो काम कर रहे हैं, वह करना चाहिए। आपको क्या समस्या है?

— डैनियल वैसलो

आपका कोड ठीक काम करता है, समस्या क्या है?

— सरफराज

यह काम करना चाहिए ... jsfiddle.net/QXQZj

— Hristo

खेद है कि यह मुख्य कोड सिंटैक्स पर मेरी गलती थी, मुझे लगा कि यह पहली बार है क्योंकि मैं जावास्क्रिप्ट में कॉलबैक का उपयोग करता हूं

— vitto

यदि आप किसी कॉलबैक में पैरामीटर जोड़ना चाहते हैं, लेकिन कॉलिंग को बदल नहीं सकते हैं (जैसा कि आपके पास तर्क क्रम को बदलने की कोई शक्ति नहीं है, तो आप जेएस बाइंड के साथ कॉलबैक के कुछ मापदंडों को पूर्व-बाँध सकते हैं, जैसा कि मैंने दिखाया है इसका उत्तर: stackoverflow.com/a/28120741/1695680

— ThorSummoner

Answer 1

यदि आप कुछ अधिक सामान्य चाहते हैं, तो आप तर्क चर का उपयोग कर सकते हैं जैसे:

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

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

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

लेकिन अन्यथा, आपका उदाहरण ठीक काम करता है (तर्क [0] का उपयोग परीक्षक में कॉलबैक के स्थान पर किया जा सकता है)

Comments

जब तक हम सामान्य होने की भावना में हो रहे हैं, callback.apply(arguments)जब तक callbackTesterकि दो तर्क परिदृश्यों से परे फ़ंक्शन बॉडी एक्स्टेंसिबल है।

— स्टीवन

क्षमा करें, यह मुख्य कोड में एक सिंटैक्स त्रुटि थी, मुझे लगा कि यह पहली बार है क्योंकि मैंने पहली बार जावास्क्रिप्ट में कॉलबैक का उपयोग किया है, आपने मुझे यह समझने में मदद की है कि यह प्रोबेलम नहीं था, और एक महान उदाहरण देखने के लिए।

— vitto

FYI, एक अनाम फ़ंक्शन (Marimuthu का उत्तर) या .bind () (एंडी का उत्तर) का उपयोग करके कॉलबैक के लिए तर्कों को पारित करने के लिए बहुत अधिक क्लीनर तरीके हैं।

— एंटोनी

Answer 2

यह भी काम करेगा:

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

Comments

यह बहुत अच्छा काम करता है क्योंकि यह अनाम फ़ंक्शन को जैसे पैरामीटर में पास करने की अनुमति देता है: कॉलबैकटेस्टर (फ़ंक्शन (डेटा) {tryMe (डेटा, "हैलो", "अलविदा");});

— माइकल खलीली

मैं यह भी जांचना पसंद करता हूं कि कॉलबैक वास्तव में एक फ़ंक्शन है। if (typeof window[callback] == 'function') window[callback].call(this);

— ग्रीकाटिना

Answer 3

आपका प्रश्न अस्पष्ट है। यदि आप पूछ रहे हैं कि आप इसे सरल तरीके से कैसे कर सकते हैं, तो आपको ECMAScript 5th संस्करण विधि (.bind) पर एक नज़र डालनी चाहिए , जो Function.prototype का एक सदस्य है । इसका उपयोग करके, आप कुछ इस तरह कर सकते हैं:

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

उदाहरण

बाइंड () - प्रोटोटाइपज डॉक्यूमेंटेशन

Comments

ब्याज में से, के बीच क्या फर्क है Array.prototype.slice.call(arguments)और arguments.slice()?

— sje397

@ sje397: तर्क एक * वास्तविक * सरणी नहीं है, इसलिए इसमें स्लाइस () विधि नहीं है। हालांकि, Array.prototype पर स्लाइस () विधि जानबूझकर सामान्य है, इसलिए आप किसी भी ऑब्जेक्ट को संख्यात्मक सूचकांक और एक लंबी संपत्ति पास कर सकते हैं और यह काम करेगा।

— एंडी ई

यह सबसे सुरुचिपूर्ण उत्तर है

— एंटोनी

यह .bind () वास्तव में बहुत अच्छा है और कॉलबैक की उपयोग और सरलता को बहुत बढ़ाता है। इसे समझने के लिए एक मूल नमूने के रूप में, यदि आपके पास है:f = function(arg1,arg2){alert(arg1+arg2);}.bind(this,"abc"); f("def") // Gives "abcdef"

— ले Droid

यह वास्तव में एक गंभीर जवाब है। बहुत बढ़िया और मेरे लिए अच्छा काम। धन्यवाद :)

— विष्णु मिश्रा

Answer 4

जब आपके पास एक कॉलबैक होता है जिसे आपके कोड के अलावा किसी अन्य विशिष्ट नंबर के साथ कॉल किया जाएगा और आप अतिरिक्त पैरामम्स में पास होना चाहते हैं तो आप कॉलबैक फ़ंक्शन को कॉलबैक के रूप में पास कर सकते हैं और रैपर के अंदर अतिरिक्त परम (s) को पास कर सकते हैं।

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
}

Answer 5

यदि आप सुनिश्चित नहीं हैं कि आप कॉलबैक फ़ंक्शन में कितने पैरामीटर पारित करने जा रहे हैं, तो applyफ़ंक्शन का उपयोग करें।

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

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

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

Answer 6

'पैरेंट' फंक्शन कहे जाने पर उनका मूल्यांकन करने के लिए फंक्शन रैपर के भीतर तर्कों के साथ 'चाइल्ड' फंक्शन (एस) को पास किया जा रहा है।

function outcome(){
    return false;
}

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

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

Answer 7

किसी भी पैरामीटर और एक कॉलबैक संदर्भ के साथ एक प्रश्न से कोड:

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

Answer 8

इस सरल उदाहरण में करी फ़ंक्शन का उपयोग करें।

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>

Answer 9

परिदृश्य के लिए एक नया संस्करण जहां कॉलबैक को किसी अन्य फ़ंक्शन द्वारा कॉल किया जाएगा, न कि आपका अपना कोड, और आप अतिरिक्त पैरामीटर जोड़ना चाहते हैं।

उदाहरण के लिए, आइए दिखाते हैं कि आपके पास सफलता और त्रुटि कॉलबैक के साथ बहुत से नेस्टेड कॉल हैं। मैं इस उदाहरण के लिए कोणीय वादों का उपयोग करूंगा लेकिन कॉलबैक के साथ कोई भी जावास्क्रिप्ट कोड इस उद्देश्य के लिए समान होगा।

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

कॉलिंग फ़ंक्शन आपके कॉलबैक फ़ंक्शन पैरामीटर के बाद भी त्रुटि पैरामीटर जोड़ देगा।

Answer 10

मैं एक ही चीज की तलाश में था और समाधान के साथ समाप्त हो गया और यहां एक सरल उदाहरण है यदि कोई भी इस से गुजरना चाहता है।

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

साथ ही दूसरे सवाल पर भी यहां पोस्ट किया है

Answer 11

मुझे एक कॉलबैक का उपयोग करने के लिए आपको एक बहुत ही सादे 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 ('कुछ स्ट्रिंग', 6, फ़ंक्शन (गलत, परिणाम) .. और परिणाम देखें।

मुझे उम्मीद है कि यह उदाहरण मदद करता है क्योंकि यह कॉलबैक फ़ंक्शन के बहुत ही मूल विचार का प्रतिनिधित्व करता है।

Answer 12

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

प्रसार सिंटैक्स के बारे में अधिक पढ़ें

Answer 13

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

Comments

कृपया एक स्पष्टीकरण जोड़ें कि आप क्या कर रहे हैं और क्यों कर रहे हैं :)

— प्रेस्टन बेडर

ठीक है, मैं अपने अगले उत्तर से करूँगा, ऊपर के लिए खेद है क्योंकि यह मेरा पहला उत्तर है।

— संथोस जेरी