0

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;

    }
thenexus00
  • 22
  • 5
  • the function simply passes its callback parameter as the callback argument of whatever it's calling to perform the load. – Barmar Feb 09 '17 at 22:58
  • If you show how `loadCSSFunction` performs the CSS loading, we can advise how to modify it. – Barmar Feb 09 '17 at 23:00
  • http://stackoverflow.com/questions/5537622/dynamically-loading-css-file-using-javascript-with-callback-without-jquery – ibrahim mahrir Feb 09 '17 at 23:02
  • 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 Feb 10 '17 at 01: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 Feb 10 '17 at 01:30

1 Answers1

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);
});
Keith
  • 22,005
  • 2
  • 27
  • 44
  • 1
    It's likely that the CSS loading stuff will be asynchronous, so he needs to call his callback in the async loader's callback. – Barmar Feb 09 '17 at 22:59
  • Indeed but, without the rest of the CSS loading he said he can do, it's a little bit awkward to show this yet. – Keith Feb 09 '17 at 23:01
  • Indeed, that's why we should wait for him to clarify the question before trying to answer. – Barmar Feb 09 '17 at 23:01
  • 1
    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.. – Keith Feb 09 '17 at 23:02
  • 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. – Barmar Feb 09 '17 at 23:04
  • This was the questions -> `How do I construct the loadCSSFunction to be able to form these functions`, what bit am I missing? – Keith Feb 09 '17 at 23:05
  • This was also in the question: **once the action has taken place (injecting CSS into head)**. – Barmar Feb 09 '17 at 23:06
  • Why you miss the `so`? , the meaning of `so once` is different to `once`.. `So Once` obviously implies, like he even said he knows how to load the CSS. – Keith Feb 09 '17 at 23:08
  • Sorry of the CSS part has caused confusion. It was just part of the example. I have done an update with more and better info – thenexus00 Feb 10 '17 at 01:26
  • Hi, does the `loadCSSFunction` make sense, it will also work for async & sync, when you have your result, just call the callback, you can also pass parameters to the callback if some are required. On a side note, if you do lots of async stuff, and if your a javascript dev, who doesn't, try looking into promises, callback's can get very hard to debug the more you use them,. Also new ES-Next stuff has some nice features like async / await that work with promises that makes things even nicer. – Keith Feb 10 '17 at 01:34
  • I updated it. Keith is correct in getting what I was asking. It not quite there yet though as there are other questions with that answer but do not allow as you would with a jquery plugin etc. I can achieve similar with fat arrow functions but do not want to do that. – thenexus00 Feb 10 '17 at 01:40
  • I've updated my answer to give more example on creating callback, I've placed comments in there to try and explain a little bit better. I'm not sure what else to explain on using callbacks. If it's still not what your after, maybe post the code you mean that's using fat arrow syntax.. – Keith Feb 10 '17 at 01:49