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

Vue.js is limited in its ability to efficiently partition code into easily loadable modules

Learn the process of uploading a file using FormData alongside multer in node js. Experience the issue of receiving undefined in req.file and { } in req.body

Refreshin the attached DOM to a directive without a page reload

Vue components failing to reflect code changes and update accordingly

Is there a way for me to personalize the background of the mui-material datagrid header?

The function Object.defineProperties() allows for reassigning a property's value after it has been initially

Node.js express version 4.13.3 is experiencing an issue where the serveStatic method is not properly serving mp3 or

React Material-UI is notorious for its sluggish performance

View content from a text file on a webpage

What is the best way to showcase a div on top of all other elements in an HTML page?

Initiate an AJAX request within an existing AJAX request

Reopen a Kendo UI dialog

Inserting an HTML element into Handlebars.js during a specific iteration of an each loop

The ideal version of firebase for showing messages in the foreground

What steps can be taken to resolve the error message "AttributeError: 'WebElement' object does not have the attribute 'find_element_class_name'?"

Jquery Ajax POST not functioning as expected

The function $.getJSON() seems to be non-responsive

Evolution of ReactJS state over time

Perform a Selenium action to click on each individual HTML 'a' tag on

What steps can I take to address this issue with my express node and ejs?