How to have a callback function with ,function (){ in Javascript

Question

I know how to do core callbacks and functions but I would like this use case:

   loadCSSFunction('/stylesheets/swiper.css',function (e){

        Execute code
        //Do some jquery call to a plugin for example

    });

How do I construct the loadCSSFunction to be able to form these functions, so once the action has taken place (injecting CSS into head (which I am fine with)) I can then execute something that relies on that CSS injection.

Update: Please note the CSS element of this is not relevant, its just part of the example and not relevant to the question. If I did want to inject it async etc I will do.

Function call:

   doSomethingWithFile('/folder/file.file',function (e){

        Execute code

    });

Function:

doSomethingWithFile: function(file){
      var mything = 'thing'+file;

    }

the function simply passes its callback parameter as the callback argument of whatever it's calling to perform the load. — Barmar
– Barmar, Commented Feb 9, 2017 at 22:58
If you show how loadCSSFunction performs the CSS loading, we can advise how to modify it. — Barmar
– Barmar, Commented Feb 9, 2017 at 23:00
It is not a duplicate @Barmar. IT may have CSS in there, but that was just used as the example information. Its just a sample use case. The core concept solution is what I am after — thenexus00
– thenexus00, Commented Feb 10, 2017 at 1:24
I've reopened. Please add the code of loadCSSFunction so we can understand what it's doing and show where to put the callback. — Barmar
– Barmar, Commented Feb 10, 2017 at 1:30

Keith · Accepted Answer · 2017-02-10 01:52:36Z

1

Just define your function with a callback parameter.

eg.

function loadCSSFunction(url, callback) {
   //do you CSS loading.
   //we have now loaded lets call the callback
   var e = 'something to pass to callback';
   callback(e);
}

Your do something with file, is really not much different to your CSSloader.

doSomethingWithFile: function(file, callback){
  var mything = 'thing'+file;
  //do what you want to do with file, 
  //again it doesn't matter if it's async / sync.
  //just call the callback when done..
  //eg below, readFileContents might be an async function
  readFileContents(file, function (err, data) {
    //normally async callbacks usually pass an err param
    //you should normally check for this too.
    if (err) callback(err); //if we have error pass it along.
    else callback(null, data); //here were sending our result back
  });
}

And now we can use our doSomethingWithFile..

doSomethingWithFile('thefile.txt', function (err, data) {
  if (err) console.error(err);
  else console.log(data);
});

edited Feb 10, 2017 at 1:52

answered Feb 9, 2017 at 22:59

Keith

24.4k2 gold badges32 silver badges48 bronze badges

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

12 Comments

Barmar Over a year ago

It's likely that the CSS loading stuff will be asynchronous, so he needs to call his callback in the async loader's callback.

Keith Over a year ago

Indeed but, without the rest of the CSS loading he said he can do, it's a little bit awkward to show this yet.

Barmar Over a year ago

Indeed, that's why we should wait for him to clarify the question before trying to answer.

Keith Over a year ago

No, I answered the question. He wanted to know how to use the callback.. It's done.. How to handle Async operations is a different question..

Barmar Over a year ago

He said he wants to call the callback after the CSS is loaded. The correct answer depends on whether it's loaded synchronously or asynchronously. Your answer only works for synchronous loading.

|

Collectives™ on Stack Overflow

How to have a callback function with ,function (){ in Javascript

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related