1. 实现一个LazyMan,可以按照以下方式调用:
    2. LazyMan(“Hank”)输出:
    3. Hi! This is Hank!
    4. LazyMan(“Hank”).sleep(10).eat(“dinner”)输出
    5. Hi! This is Hank!
    6. //等待10秒..
    7. Wake up after 10
    8. Eat dinner~
    9. LazyMan(“Hank”).eat(“dinner”).eat(“supper”)输出
    10. Hi This is Hank!
    11. Eat dinner~
    12. Eat supper~
    13. LazyMan(“Hank”).eat(“supper”).sleepFirst(5)输出
    14. //等待5秒
    15. Wake up after 5
    16. Hi This is Hank!
    17. Eat supper
    18. /* 分析思路:
    19. 1,实现链式调用,可调用方法 都会返回 this 也就是 new 出来的实例对象;
    20. 2,实现延迟调用;
    21. 3,可自定义任务优先调用
    22. */
    1. class LazyMan {
    2. constructor(name) {
    3. this.tasks = []
    4. const task = () => {
    5. console.log('Hi! This is ' + name)
    6. this.next()
    7. }
    8. this.tasks.push(task)
    9. // 重点,下一次需执行的宏任务,触发任务入口
    10. setTimeout(() => {
    11. this.next()
    12. }, 0)
    13. }
    14. // next ??? 依次执行任务队列中的任务
    15. next() {
    16. const task = this.tasks.shift()
    17. task && task()
    18. }
    19. sleep(time) {
    20. this._sleepWrapper({ time, isFirst: false })
    21. return this
    22. }
    23. sleepFirst(time) {
    24. this._sleepWrapper({ time, isFirst: true })
    25. return this
    26. }
    27. _sleepWrapper({time, isFirst}) {
    28. const task = () => {
    29. setTimeout(() => {
    30. console.info('Wake up after ' + time)
    31. this.next()
    32. }, time * 1000)
    33. }
    34. if(isFirst) {
    35. this.tasks.unshift(task)
    36. } else {
    37. this.tasks.push(task)
    38. }
    39. }
    40. eat(name) {
    41. const task = () => {
    42. console.log('Eat ' + name)
    43. this.next()
    44. }
    45. this.tasks.push(task)
    46. return this
    47. }
    48. }
    49. function lazyMan(name) {
    50. return new LazyMan(name)
    51. }
    52. // lazyMan("Hank")
    53. // lazyMan("Hank").sleep(2).eat("dinner")
    54. // lazyMan("Hank").eat("dinner").eat("supper")
    55. lazyMan("Hank").eat("supper").sleepFirst(3)