一道腾讯前端面试题，用来学习与分享

最新推荐文章于 2025-09-03 08:03:40 发布

转载最新推荐文章于 2025-09-03 08:03:40 发布 · 657 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mrzll/p/10277640.html

文章标签：

#面试

本文介绍了一个使用JavaScript实现的链式调用异步任务管理器，通过HardMan函数，可以创建一个对象，该对象允许进行链式调用以安排一系列带有延迟的任务，如休息和学习。文章详细解释了实现逻辑，包括如何使用setTimeout来实现延迟执行，以及如何通过任务队列管理和执行这些任务。

面试题看的多，看到这篇觉得很不错，思考很多，特来分享一下~

<!--需求-->
<!-- '//>' 指控制台打印 -->
HardMan('lilei')
//> i'm lilei
HardMan('lilei').rest(10).learn('chinese')
//> i'm lilei 
// 等待10秒
//> start learning after 10s
//> learning chinese
HardMan('lilei').restFirst(5).learn('chinese')
// 等待5s
//> start learning after 5s
//> i'm lilei
//> learning chinese

// 看到这个需求，我们整理一下，
// 首先只调用函数HardMan（name） 这里console.log('im'+name)即可
// 第二个.rest().learn() 这边有一个链式调用，那说明第一个函数调用后我们需要在函数内部返回一个包含.rest的对象， 并根据参数延迟时间与学习内容
// 紧接着 .restFirst()的调用， 优先执行这个函数内容，说明这个功能是需要插入到前面的。 下面我们看代码实现与思路整理

<!--实现-->
function HardMan (name) {
    var task = [], //任务容器
        after = 0; //初始延迟执行时间
    function next() {
        // 任务执行器
        if(task.length) (task.shift()) ();  // shift 用于把数组的第一个元素从其中删除，并返回第一个元素的值
        // 这边执行next() 相当于调用task数组中的第一个函数，并删除它
    };
    function sleep(time) {
        // 延时器
        return function() {
            setTimeout(function(){
                after += time;
                console.log('start learning after'+ after + 's')
            }, time*1000)
        }
    };
    // 提供外部方法
    var fn = function() {};
    fn.prototype.rest = function(time) {
        task.push(sleep(time)); // 任务中加入sleep返回的函数
        return this; // 返回当前this 用于链式调用
    };
    fn.prototype.restFirst = function(time) {
        task.unshift(sleep(time));  // unshift() 方法可向数组的开头添加一个或更多元素 。 这边是加入到数组前面最先调用 。
        return this;
    };
    fn.prototype.learn = function (sub) {
        task.push(function() {
            console.log('learn'+ sub);
            after = 0; //初始化
            next(); // 执行完执行下一个
        })  
        return this;
    };
    
    task.push(function() {
        console.log('i"m' + name);
        after = 0;
        next();
    });
    // 第一个
    setTimeout(next, 0)
    
    return new fn()  // 返回 实例对象 可调用它的内部方法  例：HardMan (name).rest(time)
}

只看需求真的很难一下子想到这样的处理方法，通过这个主要学习思路，敲代码重要的就是逻辑。。。

语言能力不是很强，分析不好的地方希望指出，十分感谢~

转载于:https://www.cnblogs.com/mrzll/p/10277640.html