阅读 6005

用一道题目来验证你的JS功底,真香~

鼠年的春节只有三个字'宅~宅~宅~',宅来无事想起之前碰到的一个JS题目,感觉还是蛮有趣的,放出来大家一起思考下~

首先我们说一下题目(需求来了,面对疾风吧~)

/**
 * 请写出两种或两种以上实现方法满足: execute 对应的id按顺序打印
 * PS: 尝试只修改start函数体
 *
 * 输出结果参考:
 * id 0
 * id 1
 * id 2
 * id 3
 * id 4
 */

function start(id) {
  execute(id).catch(console.error);
}

// 测试代码 (请勿更改):

for (let i = 0; i < 5; i++) {
  start(i);
}

function sleep() {
  const duration = Math.floor(Math.random() * 500);
  return new Promise(resolve => setTimeout(resolve, duration));
}

function execute(id) {
  return sleep().then(() => {
    console.log("id", id);
  });
}

复制代码

看到这个题目大家可以思考30s,想一想怎么去解这道题目,有兴趣的可以直接拷贝题目到一个顺手的编辑器里尝试写一写,对于程序猿来说思考的过程还是很重要的


下面开始写答案了哦~ 当然了,只是我的解题方案,大家有什么更好的方案也希望可以在评论区不吝赐教,也可以扫码添加文末二维码在微信群进行交流。准备好了吗?Baby~

以下答案只会放start函数体的更改,毕竟我们的题干只要求更改start函数体

答案一

此方案可以实现需求,但是每次调用start函数,都会清除timer,导致只有所有的调用都push完才会真正执行execute函数,代码也不优雅,算是勉强可以实现功能

注意,本例子中的start函数体内this.x是可以替换为start.x的,这样做,可避免严格模式下this为undefined而导致的异常,在非严格模式下可避免污染全局变量

function start(id) {
  if (!this.processList) this.processList = [];
  this.processList.push({ id });
  clearTimeout(this.t);
  this.t = setTimeout(() => {
    (async () => {
      let target = this.processList.shift();
      while (target) {
        await execute(target.id);
        target = this.processList.shift();
      }
    })();
  }, 0);
}
复制代码

作为一个有追求的FEer怎么可以仅仅停留在方案一呢,思考~~~

答案二

经过苦苦思索,终于打通任督二脉写出了个人认为最优雅的实现方案,这个方案不需要借助定时器,思路就是Promise的链式调用即then函数

function start(id) {
  start.promises = !start.promises
    ? execute(id)
    : start.promises.then(() => execute(id));
}
复制代码

到此,解题告一段落,整个解题过程还是痛苦的,但是解题完毕还是蛮有成就感的~

对前端技术交流有兴趣的同学,可以微信扫码下面的关注公众号【见闻号】或者加入前端开发者微信群,方便大家交流前端技术

本文为原创文章,仅作个人存档所用,请勿随意转载。如确有转载需求,请在转载时务必带上原文链接!码字不易,多谢合作!

关注下面的标签,发现更多相似文章
评论