75

JavaScript code I'm starting with: 

function doSomething(url) {  
   $.ajax({
      type: "GET",  
      url: url,  
      dataType: "xml",  
      success: rssToTarget  
   });  
}

Pattern I would like to use:

//where elem is the target that should receive new items via DOM (appendChild)
function doSomething(url, elem) {
   $.ajax({
      type: "GET",
      url: url,
      dataType: "xml",
      success: rssToTarget(elem)
   });
}

I don't think I can get the callback to work this way, right? What is the proper pattern? I don't want to use global variables necessarily to temporarily hold the elem or elem name.

Improve this question
2
  • stackoverflow.com/questions/2602981/… use invokedata Commented Mar 27, 2012 at 6:10
  • For future reference: You need to store the callback function (rssToTarget) within the success property of the object literal you are passing to $.ajax(), so jQuery can call that function once the AJAX request is completed. By adding (elem) to the end of the function name, you are mistakenly invoking rssToTarget and storing its return value within success. In JS, adding parentheses at the end of a function name will invoke it. Commented Feb 24, 2017 at 18:00

3 Answers 3

Reset to default
97

Like this...

function doSomething(url, elem) {
  $.ajax({
     type: "GET",
     url: url,
     dataType: "xml",
     success: function(xml) {
       rssToTarget(xml, elem);
     }
  });
}

Answer to your comment: Does use of anonymous functions affect performance?

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

aha +1. Do you pay any performance price for creating anon functions everywhere?
And I guess it would really be.... success: function(xml) { rssToTarget(xml, elem); }
if you wrap your $.ajax call in a loop, this approach will create new function (function(xml) { ... }) for every loop, consuming more memory.
30

The pattern you'd like to use could work if you create a closure inside your rssToTarget function:

function rssToTarget(element) {
  return function (xmlData) {
    // work with element and the data returned from the server
  }
}

function doSomething(url, elem) {
    $.ajax({ type: "GET",
         url: url,
         dataType: "xml",
         success: rssToTarget(elem)
       });
}

When rssToTarget(elem) is executed, the element parameter is stored in the closure, and the callback function is returned, waiting to be executed.

Improve this answer

10 Comments

-1 You cant set success to a function that returns a function.
I forgot to add " but requires a parameter"
of course you can return a function check the code running! jsbin.com/anepo/edit
The returned anonymous function has an input parameter... JavaScript functional capabilities allows you to do that and more with functions...
This answer more faithfully reproduces what the OP wanted to achieve than the accepted answer does.
|
0

What about exploting Ajax request settings context?

function doSomething(url, elem) {
   $.ajax({
      type: "GET",
      url: url,
      dataType: "xml",
      success: rssToTarget,
      elem: elem               // <- add as settings argument
   });
}

rssToTarget(ans) {
    elem = this.elem;          // <- get it back using "this"
}

By default callback context is a merge of $.ajaxSettings and settings passed to $.ajax. So if you add your fields in $.ajax settings they go into callback context. That is, you can retrieve them from context using this.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.