sending parameters to a callback function that is listening for arguments

Question

sending parameters to a callback function that is listening for arguments

function setmclisten(message, sender, sendResponse) {
  console.log(data);
  if(message['type'] === 'startUp')
  {
    console.log(data);
    sendResponse(data)
  }
}
function QuarryToServer(){
  chrome.runtime.onMessage.removeListener(setmclisten);
  $.ajax({
    type: "GET",
    async: true,
    form: 'formatted',
    url: SERVERURL,
    success: function (data) {
      //sends a get 
      console.log("set startup listener");
      debugger;
      chrome.runtime.onMessage.addListener(setmclisten);
    },
    fail: function () { console.error("error quarrying server"); }
  });
}

I am facing an issue where I need the function to have a name so that I can remove the listener later on. However, when I make it a named function, I lose access to the data variable. If I try to pass it like addListen(func(args)), it will just call the function instead of passing it as a variable. Is there a way to pass the variable and still have the function defined in the global scope? To clarify, I have the setmclisten function and I need it to be named while still being able to pass the data argument and receive the onmessage listener arguments like the message itself.

javascript ajax callback

Answer 1

Answer №1

It appears that I have identified the issue at hand. With additional context, we might offer a more effective solution to help you resolve it. However, for now, an approach involving minimal changes is to keep track of the last listener, as demonstrated below (refer to *** comments):

function setmclisten(message, sender, sendResponse, data) { // *** Ensure `data` param
                                                            // is included at the end
  console.log(data);
  if(message['type'] === 'startUp')
  {
    console.log(data);
    sendResponse(data)
  }
}
let lastListener = null; // *** Keep record of the last listener
function QuarryToServer(){
  // *** Discard the previous listener if one exists
  if (lastListener) {
      chrome.runtime.onMessage.removeListener(lastListener);
      lastListener = null;
  }
  $.ajax({
    type: "GET",
    async: true,
    form: 'formatted',
    url: SERVERURL,
    success: function (data) {
      console.log("set startup listener");
      // *** Establish a new listener and attach it
      lastListener = function(message, sender, sendResponse) {
          return setmclisten(message, sender, sendResponse, data);
          // *** Alternatively, if `this` is crucial in the call:
          // return setmclisten.call(this, message, sender, sendResponse, data);
      };
      chrome.runtime.onMessage.addListener(lastListener);
    },
    fail: function () { console.error("error quarrying server"); }
  });
}

Another approach is to consistently maintain a listener instead of constantly adding and removing it, utilizing the most recent data:

let lastData = null; // ***
function setmclisten(message, sender, sendResponse) {
  if (!lastData) {
    return;
  }
  console.log(lastData);
  if(message['type'] === 'startUp')
  {
    console.log(lastData);
    sendResponse(lastData)
  }
}
function QuarryToServer(){
  $.ajax({
    type: "GET",
    async: true,
    form: 'formatted',
    url: SERVERURL,
    success: function (data) {
      lastData = data; // ***
    },
    fail: function () { console.error("error quarrying server"); }
  });
}

In the provided code snippets, it is assumed that you execute

chrome.runtime.onMessage.addListener(setmcllisten);

one time.

Answer 2

It appears that I have identified the issue at hand. With additional context, we might offer a more effective solution to help you resolve it. However, for now, an approach involving minimal changes is to keep track of the last listener, as demonstrated below (refer to *** comments):

function setmclisten(message, sender, sendResponse, data) { // *** Ensure `data` param
                                                            // is included at the end
  console.log(data);
  if(message['type'] === 'startUp')
  {
    console.log(data);
    sendResponse(data)
  }
}
let lastListener = null; // *** Keep record of the last listener
function QuarryToServer(){
  // *** Discard the previous listener if one exists
  if (lastListener) {
      chrome.runtime.onMessage.removeListener(lastListener);
      lastListener = null;
  }
  $.ajax({
    type: "GET",
    async: true,
    form: 'formatted',
    url: SERVERURL,
    success: function (data) {
      console.log("set startup listener");
      // *** Establish a new listener and attach it
      lastListener = function(message, sender, sendResponse) {
          return setmclisten(message, sender, sendResponse, data);
          // *** Alternatively, if `this` is crucial in the call:
          // return setmclisten.call(this, message, sender, sendResponse, data);
      };
      chrome.runtime.onMessage.addListener(lastListener);
    },
    fail: function () { console.error("error quarrying server"); }
  });
}

Another approach is to consistently maintain a listener instead of constantly adding and removing it, utilizing the most recent data:

let lastData = null; // ***
function setmclisten(message, sender, sendResponse) {
  if (!lastData) {
    return;
  }
  console.log(lastData);
  if(message['type'] === 'startUp')
  {
    console.log(lastData);
    sendResponse(lastData)
  }
}
function QuarryToServer(){
  $.ajax({
    type: "GET",
    async: true,
    form: 'formatted',
    url: SERVERURL,
    success: function (data) {
      lastData = data; // ***
    },
    fail: function () { console.error("error quarrying server"); }
  });
}

In the provided code snippets, it is assumed that you execute

chrome.runtime.onMessage.addListener(setmcllisten);

one time.

sending parameters to a callback function that is listening for arguments

Answer №1

Similar questions

Ways to determine cleanliness or filthiness in an Angular 5 modal form?

Error: React JS is unable to access the property 'path' because it is undefined

What is the best way to simultaneously utilize two APIs where one is using HTTP and the other is using HTTPS?

"Encountering a puzzling issue with Django Rest Framework where the path setup is functioning for one link but not for

Create a PDF document and provide a reply

I am in search of a specialized 3D camera with a unique effect

Clicking on React Js reverses an array that had previously been unreversed

Eliminate an array from another array if a specific value is present in an object

Is it possible for an onclick attribute to assign a function to document.getElementById without overwriting the existing value?

A different approach to joining strings

Launching URLs from JSON data in the system browser - Apache Cordova

The functionality of findDOMNode is no longer supported

Performing height calculations in JavaScript is necessary to recalculate them whenever there is a

What exactly does a module's scope entail in browsers and Node.js environments?

Is a missing dependency causing an issue with the React Hook useEffect?

Automatically logging in to a website using an AngularJS form

What's the best way to align divs vertically in a compact layout?

Deactivate Firestore listener in useEffect to cease updates

Continuously update the content within a paragraph using jQuery

Begin a new countdown timer upon clicking the next button