js 同步延时调用

function LazyMan(name) {
  return new _lazyman(name)
}
function _lazyman(name) {
  this.task = []
  var that = this
  var fn = (function(name) {
    return function() {
      console.log("Hello I'm " + name)
      that.next()
    }
  })(name)
  this.task.push(fn)
  setTimeout(function() {
    that.next()
  }, 0)
  //此处用settimeout执行是因为settimeout会在同步线程都进行完了之后再执行,如果不用settimeout就会同步触发,事件还未都放在队列中,就已经开始执行了
  //关于js同步,异步,事件循环等,可以看这篇文章http://blog.csdn.net/alex8046/article/details/51914205
}
_lazyman.prototype = {
  constructor: _lazyman,
  //next是实现函数在队列中顺序执行功能的函数
  next: function() {
    var fn = this.task.shift()
    fn && fn()
  },

  sleep: function(time) {
    var that = this
    var fn = (function(time) {
      return function() {
        console.log('sleep.......' + time)
        setTimeout(function() {
          that.next()
        }, time)
      }
    })(time)
    this.task.push(fn)
    return this
    //return this是为了实现链式调用
  },

  sleepfirst: function(time) {
    var that = this
    var fn = (function(time) {
      return function() {
        console.log('sleep.......' + time)
        setTimeout(function() {
          that.next()
        }, time)
      }
    })(time)
    this.task.unshift(fn)
    return this
  },

  eat: function(something) {
    var that = this
    var fn = (function(something) {
      return function() {
        console.log('Eat ' + something)
        that.next()
      }
    })(something)
    this.task.push(fn)
    return this
  }
}

LazyMan('Joe')
  .sleepfirst(3000)
  .eat('breakfast')
  .sleep(1000)
  .eat('dinner')

let LazyMan = name => new _lazyman(name);

function _lazyman(name) {
  let t = this;
  this.tasks = [];
  let fn = () => {
    console.log("HI " + name);
    t.next();
  };
  this.tasks.push(fn);
  setTimeout(() => t.next(), 0);
}
_lazyman.prototype = {
  constructor: _lazyman,
  next() {
    let fn = this.tasks.shift();
    fn && fn();
  },
  sleepfirst(num) {
    let t = this;
    let fn = (num => () => {
      console.log("sleepfirst......." + num);
      setTimeout(() => {
        t.next();
      }, num);
    })(num);
    t.tasks.unshift(fn);
    return t;
  },
  eat(name) {
    let t = this;
    let fn = (() => () => {
      console.log("Eat..." + name);
      t.next();
    })();
    this.tasks.push(fn);
    return this;
  },
  sleep(num) {
    let t = this;
    let fn = (num => () => {
      console.log("sleep.." + num);
      setTimeout(() => {
        t.next();
      }, num);
    })(num);
    t.tasks.push(fn);
    return this;
  }
};

LazyMan("Joe")
  .sleepfirst(3000)
  .eat("breakfast")
  .sleep(1000)
  .eat("dinner");

// sleep.......3000
// Hello I'm Joe
// Eat breakfast
// sleep.......1000
// Eat dinner

let LazyMan = name => new _lazyman(name);
class _lazyman {
  constructor(name) {
    this.tasks = [];
    let t = this;
    let fn = () => {
      console.log("HI " + name);
      t.next();
    };
    this.tasks.push(fn);
    setTimeout(() => t.next(), 0);
  }
  next() {
    let fn = this.tasks.shift();
    fn && fn();
  }
  sleepfirst(num) {
    let t = this;
    let fn = (num => () => {
      console.log("sleepfirst......." + num);
      setTimeout(() => {
        t.next();
      }, num);
    })(num);
    t.tasks.unshift(fn);
    return t;
  }
  eat(name) {
    let t = this;
    let fn = (() => () => {
      console.log("Eat..." + name);
      t.next();
    })();
    this.tasks.push(fn);
    return this;
  }
  sleep(num) {
    let t = this;
    let fn = (num => () => {
      console.log("sleep.." + num);
      setTimeout(() => {
        t.next();
      }, num);
    })(num);
    t.tasks.push(fn);
    return this;
  }
}

LazyMan("Joe")
  .sleepfirst(3000)
  .eat("breakfast")
  .sleep(1000)
  .eat("dinner");

// sleep.......3000
// Hello I'm Joe
// Eat breakfast
// sleep.......1000
// Eat dinner
posted @ 2020-02-25 16:51  霜末之冬  阅读(2739)  评论(0编辑  收藏  举报