这是微信小程序的一道面试题,题目是这样的:

实现一个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

以此类推。

大家可以自己尝试着写一下,以下是我个人写的代码及分析:

其实是一个关于js流程控制的问题:

自己手写了一下,一开始觉得没什么难度,写的时候还是发现了一些问题,不过也顺带复习了一下js基本功,代码如下:

function LazyMan(name){
  return new _lazyman(name);
}

function _lazyman(name) {
  this.task=[];
  var that=this;
  var fn=(function(name){
    return function(){
      console.log("Hello I'm "+name);
      that.next();
    }
  })(name);

  this.task.push(fn);

//此处用settimeout执行是因为settimeout会在同步线程都进行完了之后再执行,如果不用settimeout就会同步触发,事件还未都放在队列中,就已经开始执行了

//关于js同步,异步,事件循环等,可以看这篇文章http://blog.csdn.net/alex8046/article/details/51914205
  setTimeout(function(){that.next()},0)
}

_lazyman.prototype={
  constructor:_lazyman,

//实现函数在队列中顺序执行功能的函数

  next:function(){
    var fn=this.task.shift();
    fn&&fn();
  },

  sleep:function(time){
    var that=this;
    var fn=(function(time){
      return function(){
        console.log("sleep......."+time);
        setTimeout(function(){
          that.next();
        },time)
      }
    })(time);
    this.task.push(fn);

//return this是为了实现链式调用
    return this;
  },

  sleepfirst:function(time){
    var that=this;
    var fn=(function(time){
      return function(){
        console.log("sleep......."+time);
        setTimeout(function(){
          that.next();
          },time)
        }
      })(time);
    this.task.unshift(fn);
    return this;
  },

  eat:function(something){
    var that=this;
    var fn=(function(something){
        return function(){
        console.log("Eat "+something);
        that.next();
        }
      })(something)
      this.task.push(fn);
      return this;
    }
  }
LazyMan("Joe").sleepfirst(3000).eat("breakfast").sleep(1000).eat("dinner");

大家可以自己尝试着写一下这个面试题!

微信前端面试题----js实现LazyMan的更多相关文章

  1. 前端面试题 -- JS篇

    前端面试题 -- JS篇 类型 1.js中有哪些数据类型,并解释清楚原始数据类型和引用数据类型 js中共有null,undefined, string,number,boolean,object六种数 ...

  2. 前端面试题(js)

    js 基础面试题 css 面试题 js 面试题 JavaScript 有几种类型的值?,你能画一下他们的内存图吗 原始数据类型(Undefined,Null,Boolean,Number.String ...

  3. 前端面试题 | JS部分(附带答案)

    目前在找工作,所以各方收集了一堆面试题.其实刷面试题的过程也能更新自己对知识的认识,所以也提醒自己多看多理解.如果对下面题目有更深理解,会实时更新.遇到新题目,也会不定时更新.希望能帮助到部分朋友- ...

  4. 某一线互联网公司前端面试题js部分总结

    js部分 1,使用严格模式的优点 - 消除Javascript语法的一些不合理.不严谨之处,减少一些怪异行为; - 消除代码运行的一些不安全之处,保证代码运行的安全: - 提高编译器效率,增加运行速度 ...

  5. 前端面试题-----js和jquery的区别是什么?

    最近我有一个朋友问我js和jquery的区别是什么,于是我打算写一篇文章说下到底有什么区别. 首先你要知道: 1.js是网页的脚本语言,记住哈,js是语言! 2.jquery是用js语言写出来的一个框 ...

  6. 常见前端面试题JS部分

    1.闭包 2.JS操作和获取cookie //创建cookie function setCookie(name, value, expires, path, domain, secure) { var ...

  7. 前端面试题(js部分)

    一.==和===的区别 1.==   用于比较.判断两者相等,比较时可自动换数据类型 2.===  用于(严格)比较.判断两者(严格)相等,不会进行自动转换,要求进行比较的操作数必须类型一致,不一致时 ...

  8. 各大互联网公司前端面试题(js)

    对于巩固复习js更是大有裨益.    初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型 ...

  9. 2010年腾讯前端面试题学习(js部分)

    看了牛人写的回忆文章,里面有2010年腾讯的前端面试题,里面涉及到不少基础性的问题,学习一下:) 原文地址:https://segmentfault.com/a/1190000012998107 js ...

随机推荐

  1. nodejs 教程

    http://www.runoob.com/nodejs/nodejs-http-server.html

  2. OPENCV形态学算法-2

    一.漫水填充算法 该算法通过一个指定的种子点,来分析整张图片上的像素,并设置像素差异阈值,在阈值类的点,最后变成相同的颜色.该方法通过上下限和连通方式来达到不同的连通效果. 该方法常用与标记和分离图像 ...

  3. php学习记录

    放了寒假.期末考试折腾了一个月都不会写代码了. 一放寒假就找了套PHP培训的课程 在这做些笔记,系统的学习一下php 2017.1.14 介绍集成环境---wamp Apache服务器根目录 / -- ...

  4. iOS开发——自定义进度圆环

    1.在DrawCircle.h文件中 提供了接口,在使用的时候,可以设定圆心.半径.角度.圆环的宽度.圆环的背景底色.圆环的进度条颜色,当然后面三个有自定义的值. // //  DrawCircle. ...

  5. mysql 之SQL语句--NSERT SELECT ON DUPLICATE KEY UPDATE的写法

    Table source CREATE TABLE `source` ( `key` int(11) NOT NULL AUTO_INCREMENT, `data` int(11) DEFAULT N ...

  6. FMDB事务的使用

    http://blog.csdn.net/qq_29892943/article/details/50541439 首先,说一下事务是什么,比如说我们有一个学生表和一个学生成绩表,而且一个学生对应一个 ...

  7. pho

    PDO(PHP Data Object) 是PHP 5新出来的东西,在PHP 6都要出来的时候,PHP 6只默认使用PDO来处理数据库,将把所有的数据库扩展移到了PECL,那么默认就是没有了我们喜爱的 ...

  8. Tsinsen-A1489 抽奖 【数学期望】

    乔明达太神,其实已经题解非常清楚了,我再推一遍吧. 题目意思相当于有n个盒子,无差别投m次球,每个盒子的得分为每个盒子里的球的个数. 第一问: 假设这个球放在了第i个盒子里,那么 ∆ans = (mi ...

  9. Android 屏幕适配方案(转载)

    3.百分比的引入 1.引入 其实我们的解决方案,就是在项目中针对你所需要适配的手机屏幕的分辨率各自简历一个文件夹. 如下图: 然后我们根据一个基准,为基准的意思就是: 比如480*320的分辨率为基准 ...

  10. html css基础(一)

    1.HTML:做静态网页,是一种标签语言, HTML结构: 一个HTML文档由4个基本部分组成: ① 一个文档声明:<!DOCTYPE HTML> ② 一个html标签对:<html ...