面試題 LazyMan 的Rxjs實現方式

Yuqi 發布于2019-08-23 14:38 / 2517人閱讀

摘要：前言筆者昨天在做某公司的線上筆試題的時候遇到了最后一道關于如何實現的試題，題目如下實現一個，可以按照以下方式調用輸出輸出等待秒輸出輸出等待秒以此類推。

前言

筆者昨天在做某公司的線上筆試題的時候遇到了最后一道關于如何實現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里則是把訂閱的方法放到的最后一個棧執行

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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