面试题 LazyMan 的Rxjs实现方式

Yuqi 发布于2019-08-23 14:38 / 2485人阅读

摘要：前言笔者昨天在做某公司的线上笔试题的时候遇到了最后一道关于如何实现的试题，题目如下实现一个，可以按照以下方式调用输出输出等待秒输出输出等待秒以此类推。

前言

笔者昨天在做某公司的线上笔试题的时候遇到了最后一道关于如何实现LazyMan的试题，题目如下

实现一个LazyMan，可以按照以下方式调用:
LazyMan(“Hank”)输出:
Hi! This is Hank!LazyMan(“Hank”).sleep(10).eat(“dinner”)输出
Hi! This is Hank!
//等待10秒..
Wake up after 10
Eat dinner~
LazyMan(“Hank”).eat(“dinner”).eat(“supper”)输出
Hi This is Hank!
Eat dinner~
Eat supper~
LazyMan(“Hank”).sleepFirst(5).eat(“supper”)输出
//等待5秒
Wake up after 5
Hi This is Hank!
Eat supper
以此类推。

鉴于时间的原因只可惜本人当时并没写出来，我当时脑海里其实看到提意就知道要用到队列、Promise等异步操作。然后我查阅了网上的资料好像关于这个LazyMan的实现方式倒不少，就说明这道题其实蛮有意思的，但大多都是关于Promise或setTimeout的实现，并没有Rxjs的实现方式，所以我就用一些操作符实现了这个LazyMan

class LazyManModel {
    queue: { timeout: number, fn: Function }[] = []
    constructor() {
        setTimeout(() => {
            from(this.queue).pipe(
                map(e => {
                    if (e.timeout) return of(e).pipe(delay(e.timeout * 1000));
                    return of(e)
                }),
                concatAll()
            ).subscribe(value => {
                value.fn()
            })
        })
    }

    sleep(time: number): this {
        this.queue.push({
            timeout: time,
            fn: () => { console.log(`Wake up after ${time}`) }
        })
        return this
    }

    eat(foot: string): this {
        this.queue.push({
            timeout: null,
            fn: () => { console.log(`Eat ${foot}~`) }
        })
        return this
    }

    sleepFirst(time: number): this {
        this.queue.unshift({
            timeout: time,
            fn: () => { console.log(`Wake up after ${time}`) }
        })
        return this
    }

    exported(): (name: string) => this {
        return (name): this => {
            this.queue.push({
                timeout: null,
                fn: () => { console.log(`Hi! This is ${name}!`) }
            })
            return this
        }
    }
}

示例

const LazyMan = new LazyManModel().exported();
LazyMan("Hank").eat("foot").eat("ping").sleep(10).eat("pizza").sleepFirst(5)

关于setTimeout

我在constructor构造函数里使用了setTimeout是因为，在调用的时候是链式的，其作用域一直都在同一堆栈，而setTimeout里则是把订阅的方法放到的最后一个栈执行

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100917.html

链式调用与事件循环--一道JavaScript面试题的思考

摘要：最后画几张粗糙的图，简单描述一下这个执行的过程因为是链式调用，所以在链上的都会入栈然后执行，额，执行栈少画了和。。。前言：昨天在群里讨(jin)论(chui)技(niu)术(pi)，有位老铁发了一道他面的某公司面试题，顺手保存了。今早花了一点时间把这题做了出来，发现挺有意思的，决定在今天认真工（hua)作(shui)前，与大家分享我的解题方案和思考过程。题目如下（可以自己先思考一会...

wow_worktile 2019-08-23 15:04 评论0 收藏0
关于lazyman你还应该知道这几件事

摘要：首先我们来讲这个栈在中，每当有函数被执行的时候都会在当前的执行堆栈中创建一个新的堆栈帧，并放到栈顶。因为是链式调用，所以代码一直在同一个作用于中执行，也就是说当前的堆栈帧一直没有被移出栈。前言前几天在稀土上看到一篇面试的帖子，里面微信有一道题是lazyman的实现，具体要做的事情就是 LazyMan(Hank) //Hi! This is Hank! LazyMan(Hank)....

未东兴 2019-08-20 13:55 评论0 收藏0
面试集 - 收藏集 - 掘金

摘要：计算数组的极值微信面试题获取元素的最终前端掘金一题目用代码求出页面上一个元素的最终的，不考虑浏览器，不考虑元素情况。 Excuse me？这个前端面试在搞事！ - 前端 - 掘金金三银四搞事季，前端这个近年的热门领域，搞事气氛特别强烈，我朋友小伟最近就在疯狂面试，遇到了许多有趣的面试官，有趣的面试题，我来帮这个搞事 boy 转述一下。以下是我一个朋友的故事，真的不是我。 ... ja...

crossea 2019-08-20 16:39 评论0 收藏0
技术甜品店 - 收藏集 - 掘金

摘要：前端切图神器前端掘金安装前端的基础工作就是把设计师的设计稿还原成前端页面，所以切图是作为一个前端的基本技能。腾讯 Web 工程师的前端书单 - 阅读 - 掘金作者：link 2014年一月以来，自己接触web前端开发已经两年多了，记录一下自己前端学习路上看过的，以及道听途说的一些书，基本上按照由浅入深来介绍。 JavaScript 入门《JavaScript权威指南（第六版）》 ★...

Gilbertat 2019-08-20 16:40 评论0 收藏0
JavaScript 中如何实现函数队列？（一）

摘要：相反，我们只需要在末尾里找出中的下一个函数，再调用第二个调用这个函数负责找出中的下一个函数并执行。我们现在来实现其实也可以用把拿出来通过去获取中的函数，每调用一次会加，从而达到取出下一个函数的目的。中大名鼎鼎的框架正是这样实现中间件队列的。假设你有几个函数fn1、fn2和fn3需要按顺序调用，最简单的方式当然是： fn1(); fn2(); fn3(); 但有时候这些函数是运行时一个...

Kyxy 2019-08-20 14:15 评论0 收藏0