前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >要求设计 LazyMan 类,实现以下功能

要求设计 LazyMan 类,实现以下功能

作者头像
刘嘿哈
发布2022-10-25 14:19:18
1810
发布2022-10-25 14:19:18
举报
文章被收录于专栏:js笔记js笔记

实现以下功能

代码语言:javascript
复制
LazyMan('Tony');
// Hi I am Tony
 
LazyMan('Tony').sleep(10).eat('lunch');
// Hi I am Tony
// 等待了10秒...
// I am eating lunch
 
LazyMan('Tony').eat('lunch').sleep(10).eat('dinner');
// Hi I am Tony
// I am eating lunch
// 等待了10秒...
// I am eating diner
 
LazyMan('Tony').eat('lunch').eat('dinner').sleepFirst(5).sleep(10).eat('junk food');
// Hi I am Tony
// 等待了5秒...
// I am eating lunch
// I am eating dinner
// 等待了10秒...
// I am eating junk food

功能难点是要以指定顺序执行代码,方法调用顺序又不与执行顺序不对等,所以核心目的是创建一个任务队列,这个任务队列,必须是同步执行的,将子任务插入队列前面或者后面,依次执行这些任务 vue批量异步更新也似类是似的思想

  1. 首先搭建架子, Hi I am是无顺序变化的,立即执行,所以它最简单
代码语言:javascript
复制
 class Lazy{
   constructor(name){
     console.log('Hi I am Tony')
   }
 }
 function LazyMan(name) {
   return new Lazy(name);
 }

2.创建一个微任务队列

代码语言:javascript
复制
class Lazy{
   constructor(name){
     // 这个数组是我们的任务队列,保存这一个个函数,可能是异步也可能是同步
     this.cbs=[];
     console.log('Hi I am Tony')
     // 创建一个微任务,微任务里面遍历执行每个任务(微任务不会立即执行,会在script执行栈执行完再开始)
     this.runcbs()
   }
   runcbs(){
     Promise.resolve().then(async res=>{
       while(this.cbs.length){
         // 移出任务队列中第一个元素,并且执行
         await this.cbs.shift()()
       }
     })
   }
   eat(meal){
     this.cbs.push(()=>console.log(`I am eating ${meal}`));
     // 链式调用
     return this;
   }
   sleep(time){
   // 队列中加入异步任务,会同步执行
     this.cbs.push(()=>new Promise(res=>{
       setTimeout(()=>{
         console.log(`等待了${time}秒...`)
         res();
       },time*1000)
     }))
     return this;
   }
   sleepFirst(time){
     this.cbs.unshift(()=>new Promise(res=>{
       setTimeout(()=>{
         console.log(`等待了${time}秒...`)
         res();
       },time*1000)
     }))
     return this;
   }
 }
 function LazyMan(name) {
   return new Lazy(name);
 }
 
 LazyMan('Tony').eat('lunch').eat('dinner').sleepFirst(5).sleep(10).eat('junk food');
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021-04-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档