जावास्क्रिप्ट में एक कस्टम कॉलबैक बनाएँ

Question

मेरे वर्तमान फ़ंक्शन के निष्पादन समाप्त होने पर मुझे कॉलबैक फ़ंक्शन निष्पादित करना होगा।

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 
}

मैं इसे कैसे क्रियान्वित करूं?

Comments

object.LoadData(success)कॉल परिभाषित होने के बाद होना चाहिए function success। अन्यथा, आपको यह बताने में त्रुटि होगी कि फ़ंक्शन परिभाषित नहीं है।

— जे। ब्रूनी

Answer 1

वास्तव में, आपका कोड बहुत अधिक काम करेगा, बस अपने कॉलबैक को एक तर्क के रूप में घोषित करें और आप सीधे तर्क नाम का उपयोग करके इसे कॉल कर सकते हैं।

मूल बातें

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। आप जावास्क्रिप्ट 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`

Comments

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

— अमगद फहमी

@TiTaN: यह अजीब है, कॉलबैक में मापदंडों को पारित करने के बारे में कुछ खास नहीं है। आपके फ़ंक्शन में आपके द्वारा पास किया जाने वाला कॉलबैक संदर्भ किसी अन्य की तरह एक फ़ंक्शन संदर्भ है, आप इसके साथ सभी सामान्य चीजें कर सकते हैं।

— टीजे क्राउडर

@everyone जिन्होंने उत्तर दिया: मुझे लगता है कि TiTaN की समस्या यह है कि वह किसी फ़ंक्शन को कॉलबैक में तर्क की आवश्यकता के लिए नहीं जानता है जो किसी भी तर्क को पारित नहीं करता है। सोचो setTimeout()। जवाब कॉलबैक को एक क्लोजर में लपेटने के लिए है:doSomething(function(){foo('this','should','work')})

— slebetman

किसी बिंदु पर TiTaN को थ्रेड (अधिमानतः SO पर) ऊपर के मुद्दे पर चर्चा करते हुए, मेरा खोज-फू आज कमजोर है।

— स्लीवेटमैन

@Webwoman - यह आपके उपयोग के मामले पर निर्भर करता है। आप इसे एक तर्क के रूप में पारित कर सकते हैं, या इसे किसी प्रकार की सेटिंग / विकल्प ऑब्जेक्ट या कई अन्य विकल्पों में शामिल कर सकते हैं।

— टीजे क्राउडर

Answer 2

यह सुनिश्चित करने के लिए कॉलबैक एक वास्तविक कार्य है जिसे निष्पादित करने का प्रयास करने से पहले यह करना अच्छा है:

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

  callback();
}

Comments

if(typeof callback == "function")एक ही परिणाम होगा।

— रिएक्टगुलर

हां, लेकिन अगर कॉलबैक नहीं है, तो टाइपो-आईएनजी को क्यों परेशान करें? यही बात है callback && ...

— theonlygusti

Answer 3

मेरा 2 प्रतिशत। वही लेकिन अलग ...

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


    function dosomething(damsg, callback){
        alert(damsg);
        if(typeof callback == "function") 
        callback();
    }
</script>

Comments

मुझे यह स्निपेट बहुत पसंद है, मैं इसे खोज रहा था

— vimal1083

Answer 4

function loadData(callback) {

    //execute other requirement

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

loadData(function(){

   //execute callback

});

Comments

कृपया अपने कोड को संपादित करने के बारे में विचार करें कि आपका कोड क्या करता है और क्यों यह समस्या का समाधान करेगा। एक जवाब जो ज्यादातर सिर्फ कोड होता है (भले ही यह काम कर रहा हो) आमतौर पर ओपी को उनकी समस्या को समझने में मदद नहीं करेगा। हालाँकि इस मामले में, यह एक बहुत पुराना प्रश्न है, पहले से ही पोस्ट किए गए उच्चतर उत्तरों के साथ, इसका जवाब देते समय यह आपके लायक नहीं हो सकता है जब नए प्रश्न हों जो अधिक ध्यान के साथ कर सकते हैं।

— SuperBiasedMan

मुझे यह पसंद है कि लोग क्या देखना चाहते हैं, इसके स्ट्रिफ़ फॉरवर्ड प्रदर्शन का जवाब।

— आफ्टर 3 एल

Answer 5

   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 !

Answer 6

यदि आप किसी कार्य को पूरा करना चाहते हैं तो कुछ किया जाता है। घटनाओं को सुनने के लिए एक अच्छा समाधान है। उदाहरण के लिए, मैं ES6 के साथ Dispatcherएक DispatcherEventवर्ग को लागू करूँगा , फिर:

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

DispatcherEvent:

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

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

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

हैप्पी कोडिंग!

p / s: मेरा कोड कुछ त्रुटि अपवादों को संभाल रहा है

Answer 7

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

Answer 8

कॉलबैक फ़ंक्शन को कॉल करते समय, हम इसे नीचे की तरह उपयोग कर सकते हैं:

consumingFunction(callbackFunctionName)

उदाहरण:

// Callback function only know the action,
// but don't know what's the data.
function callbackFunction(unknown) {
  console.log(unknown);
}

// This is a consuming function.
function getInfo(thenCallback) {
  // When we define the function we only know the data but not
  // the action. The action will be deferred until excecuting.
  var info = 'I know now';
  if (typeof thenCallback === 'function') {
    thenCallback(info);    
  }
}

// Start.
getInfo(callbackFunction); // I know now

यह पूरे उदाहरण के साथ कोडपेंड है ।

Answer 9

कुछ उत्तर, जबकि सही समझने के लिए थोड़ा मुश्किल हो सकता है। यहाँ आम आदमी की शर्तों में एक उदाहरण है:

var users = ["Sam", "Ellie", "Bernie"];

function addUser(username, callback)
{
    setTimeout(function()
    {
        users.push(username);
        callback();
    }, 200);
}

function getUsers()
{
    setTimeout(function()
    {
        console.log(users);
    }, 100);
}

addUser("Jake", getUsers);

कॉलबैक का अर्थ है, "जेक" हमेशा उपयोगकर्ताओं की सूची को प्रदर्शित करने से पहले उपयोगकर्ताओं के साथ जोड़ा जाता है console.log।

स्रोत (YouTube)

Answer 10

प्रयत्न:

function LoadData (callback)
{
    // ... Process whatever data
    callback (loadedData, currentObject);
}

कार्य जावास्क्रिप्ट में प्रथम श्रेणी के हैं ; आप बस उन्हें पास कर सकते हैं।