How to chain functions asynchronously using javascript?-CodePudding

I was asked to create such an object called foo that can chain the function log and wait.

For example:

foo.log('breakfast').wait(3000).log('lunch').wait(3000).log('dinner');

In this scenario it prints breakfast first and then wait 3 seconds and prints lunch, then after 3 seconds it prints dinner.

I tried something like this but it doesn't work, what did I miss?

var foo = {
  log: function(text){
    console.log(text);
    return foo;
  },
  
  wait: function(time) {
    setTimeout(function() {
      return foo;
    }, time);
  }
}

foo.log('breakfast').wait(3000).log('lunch').wait(3000).log('dinner');

CodePudding user response：

It's always better to use promises. An implementation of this functionality could be;

class Foo {
  constructor(){
    this.promise = Promise.resolve();
  }
  log(txt){
    this.promise = this.promise.then(_ => console.log(txt))
    return this;
  }
  wait(ms){
    this.promise = this.promise.then(_ => new Promise(v => setTimeout(v,ms)));
    return this;
  }
}
  
  var foo = new Foo();
  foo.log("happy").wait(1000).log("new").wait(1000).log("year");

CodePudding user response：

For the record @Redu's excellent answer without the class sugar.

const foo = {
  promise: Promise.resolve(),
  log(txt) {
    this.promise = this.promise.then(_ => console.log(txt))
    return this;
  },
  wait(ms) {
    this.promise = this.promise.then(_ => new Promise(v => setTimeout(v, ms)));
    return this;
  }
};

foo.log("happy").wait(1000).log("new").wait(1000).log("year");

CodePudding user response：

Place the call to wait inside the previous one, and as the last item, like a recursive function.

meals=['breakfast','elevenses','lunch','afternoon tea','dinner','supper'];
c=0;
wait=t=>{setTimeout(function() {
      if (c<meals.length) document.write(meals[c  ],'<br>');wait(500);
    }, t);}

wait(500);