জাভাস্ক্রিপ্ট: কলব্যাক ফাংশনে প্যারামিটারগুলি পাস করা


289

আমি কলব্যাক হিসাবে ব্যবহৃত একটি ফাংশনটিতে কিছু পরামিতি দেওয়ার চেষ্টা করছি, আমি কীভাবে এটি করতে পারি?

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

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

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

9
আপনি যা করছেন তা কাজ করা উচিত। আপনার কোন সমস্যা আছে?
ড্যানিয়েল ভ্যাসালো 13

1
আপনার কোডটি ঠিকঠাক কাজ করে, সমস্যা কি?
সরফরাজ

1
এটি কাজ করা উচিত ... jsfiddle.net/QXQZj
hristo

দুঃখিত, এটি মূল কোড বাক্য
গঠনে

আপনি যদি কলব্যাকে প্যারামিটার যুক্ত করতে চান তবে কী কল করছে তা পরিবর্তন করতে পারবেন না (যেমন আপনার মধ্যে যুক্তির ক্রম পরিবর্তন করার ক্ষমতা নেই, আপনি জেএস বাইন্ডের সাথে কিছু কলব্যাক পরামিতি প্রি-বন্ড করতে পারেন, যেমন আমি দেখিয়েছি এই উত্তর: stackoverflow.com/a/28120741/1695680
ThorSummoner

উত্তর:


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দুটি আর্গুমেন্টের দৃশ্যের বাইরেও বর্ধনযোগ্য।
স্টিভেন

1
দুঃখিত, এটি মূল কোডটিতে একটি সিনট্যাক্স ত্রুটি ছিল, আমি ভেবেছিলাম এটি এই কারণ যে আমি এই প্রথম জাভাস্ক্রিপ্টে কলব্যাক ব্যবহার করেছি, আপনি আমাকে বুঝতে সাহায্য করেছেন যে এটি প্রব্লেম নয়, এবং একটি দুর্দান্ত উদাহরণ দেখার জন্য।
ভিটো

3
এফওয়াইআই, একটি বেনামে ফাংশন (মেরিমুথুর উত্তর) বা .বাইন্ড () (অ্যান্ডির উত্তর) ব্যবহার করে কলব্যাকে আর্গুমেন্টগুলি প্রেরণের অনেক পরিষ্কার উপায়।
এন্টোইন

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
এটি দুর্দান্ত কাজ করে কারণ এটি বেনামে ফাংশনটিকে এমন পরামিতিগুলিতেও পাস করতে দেয়: কলব্যাক টেস্টার (ফাংশন (ডেটা)) ট্রাইমে (ডেটা, "হ্যালো", "বিদায়");});
মাইকেল খলিলি

আমি কলব্যাকটি আসলে একটি ফাংশন তাও পরীক্ষা করতে পছন্দ করি। if (typeof window[callback] == 'function') window[callback].call(this);
গ্রীক্যাট্রিনা

63

আপনার প্রশ্নটি অস্পষ্ট। আপনি কিভাবে আপনি একটি সহজ ভাবে এটা করতে পারেন বলছি, তাহলে আপনি এর নাম ECMAScript 5 ম সংস্করণ পদ্ধতি কটাক্ষপাত করা উচিত .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))); 
    }; 
  };
}

উদাহরণ

বাইন্ড () - প্রোটোটাইপজেএস ডকুমেন্টেশন


সুদ আউট, মধ্যে পার্থক্য কি Array.prototype.slice.call(arguments)এবং arguments.slice()?
sje397

7
@ sje397: যুক্তিগুলি একটি * আসল * অ্যারে নয়, সুতরাং এটির একটি স্লাইস () পদ্ধতি নেই। তবে অ্যারে.প্রোটোটাইপের স্লাইস () পদ্ধতিটি ইচ্ছাকৃতভাবে জেনেরিক, সুতরাং আপনি যে কোনও বস্তুর সংখ্যাসূচক সূচক এবং একটি দৈর্ঘ্যের সম্পত্তি রয়েছে তা পাস করতে পারেন এবং এটি কার্যকর হবে।
অ্যান্ডি ই

2
এটি সবচেয়ে মার্জিত উত্তর
এন্টোইন

এটি .bind () সত্যিই দুর্দান্ত এবং কলব্যাকের ব্যবহার ও সরলতার অনেকটা প্রসারিত। এটি বুঝতে একটি বুনিয়াদি নমুনা হিসাবে আপনার যদি থাকে:f = function(arg1,arg2){alert(arg1+arg2);}.bind(this,"abc"); f("def") // Gives "abcdef"
লে ড্রয়েড

এটি সত্যিই একটি দুর্দান্ত উত্তর। দুর্দান্ত এবং আমার জন্য ভাল কাজ। ধন্যবাদ :)
বিষ্ণু মিশ্র

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

যখন 'পিতামাতার' ফাংশনটি ডাকা হয় তখন তাদের মূল্যায়ন করা রোধ করতে ফাংশন র‌্যাপারগুলির মধ্যে তদন্ত হিসাবে / সন্তানের ক্রিয়াকলাপ (গুলি) মোড়ানো them

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

সেই দৃশ্যের জন্য একটি নতুন সংস্করণ যেখানে কলব্যাকটি নিজের কোড নয়, অন্য কোনও ফাংশন দ্বারা কল করা হবে এবং আপনি অতিরিক্ত পরামিতি যুক্ত করতে চান।

উদাহরণস্বরূপ, আসুন ভান করুন যে আপনার সাফল্য এবং ত্রুটি কলব্যাক সহ অনেক নেস্টেড কল রয়েছে। আমি এই উদাহরণের জন্য কৌনিক প্রতিশ্রুতি ব্যবহার করব তবে কলব্যাক সহ যে কোনও জাভাস্ক্রিপ্ট কোডটি একই উদ্দেশ্যে হবে।

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

আমি আপনাকে কলব্যাক ব্যবহারের জন্য একটি খুব সাধারণ নোড.জেএস স্টাইলের উদাহরণ দিই:

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

এবং এইচটিএমএল যা ফলাফল রেন্ডার করবে:

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

আপনি এটির সাথে এখানে খেলতে পারেন: https://jsfiddle.net/q8gnvcts/ - উদাহরণস্বরূপ সংখ্যার পরিবর্তে স্ট্রিং পাস করার চেষ্টা করুন: মাই টেস্ট ('কিছু স্ট্রিং', 6, ফাংশন (ত্রুটি, ফলাফল) .. এবং ফলাফল দেখুন।

আমি আশা করি এই উদাহরণটি সহায়তা করবে কারণ এটি কলব্যাক ফাংশনগুলির খুব প্রাথমিক ধারণা উপস্থাপন করে।



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
আপনি কী করছেন এবং কেন :) দয়া করে তার একটি বিবরণ যোগ করুন :)
প্রেস্টন বাদির

ঠিক আছে, আমি আমার পরবর্তী উত্তরটি থেকে করব, উপরের জন্য দুঃখিত কারণ এটি আমার প্রথম উত্তর।
সান্টোস জেরি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.