流星：如何从Meteor.method返回之前等待函数返回？

Question

I have a Meteor.method that creates an image and writes css. I have a spinner that displays until the method returns. The method returns almost immediately before functions that create images and css have finished doing their thing.

How do I include a callback to wait until the image and css has been written before returning from the Meteor.method?

This is my method:

createImage: function(coords) {
   console.log('1: createImage')

   var source="myimage.png";
   var im = gm.subClass({imageMagick: true});
   im(source)
    .crop()
     .write('newimage.png', function(err){
       if (err) return console.dir(arguments)
        console.log('4: image has been written')
     }) // end of write function


 fs.appendFile(directory + 'css.import.less', css, function (err) {
   if (err) throw err;
   console.log('3: The "data to append" was appended to file!');
 });

  console.log('2: image and css written')
  return true;
},

I've numbered the console logs in the order that they are displayed in. What I want is the console.log messages to be displayed in the order that they are written in.

So instead of this:

//start of method
console.log('1: createImage')
console.log('4: image has been written')
console.log('3: The "data to append" was appended to file!');
console.log('2: image and css written')
//end of method

I expect this:

//start of method
console.log('1: createImage')
console.log('2: image has been written')
console.log('3: The "data to append" was appended to file!');
console.log('4: image and css written')
//end of method

Currently the method is returning before the functions that write the image and css have returned. The effect of this is that the spinner is displaying for a split second instead of waiting till the functions that create the image and css have returned which means the spinner should be displaying for longer.

Answer 1

there's a thing called Promises in JS. http://www.html5rocks.com/en/tutorials/es6/promises/

I think it may help you figure out. the basics are so:

somePromiseShim(function(next) {
  console.log("first"); next();
}).then(function(data, next) {
  console.log("second"); next();
}).then(function(data, next) {
  console.log("third"); next();
});

you may ask yourself why you should use it - it helps doing async stuff syncish. so lets add some async functionality to the code above.

somePromiseShim(function(next) {
  console.log("first"); 
  setTimeout(function() { next(); }, 1000);
}).then(function(data, next) {
  console.log("second will fire up after 1 second"); next();
}).then(function(data, next) {
  console.log("third");
});

there is a simple implementation of Promise i did for a friend over here: https://gist.github.com/Schniz/0f525060aa9bec0b8d69 you might learn how to use it using this demo.