前端溜圈羣技術小題覆盤-第二週

前端溜圈羣技術小題覆盤-第二週

每週工做日會出一道小題，一週五題，週六分享會覆盤結束後本人會將問題與答案整理出來~方便羣內小夥伴複習。

這裏只整理簡短的解析與答案(可是我會在每週覆盤中詳細講解以及擴展)，具體內容不懂的話能夠谷歌或者私我，固然仍是建議你們多多思考多多討論。

天天第一名正確回答並解釋完整的同窗能夠得到羣主的獎勵紅包

第一天

• 整個 script 爲一個宏任務
• await 讓出線程，其語法糖能夠簡單理解爲

async function f() {
  await p;
  fn();
}

=>

function f() {
  return Promise.resolve(p).then(() => {
    fn();
  })
}
複製代碼

p 當即執行，fn 爲 Promise resolve後的回調，推入微任務隊列

• setTimeout 爲宏任務，promise 爲微任務
• 每次 Loop 後，取出一個宏任務執行，而後清空微任務

答案:

script start async1 start async2 promise1 script end async1 end promise2 setTimeout

次日

核心代碼爲 var a = b = 3，其等同於

b = 3;
var a = b;
複製代碼

• b 全局聲明
• var a 爲 IIFE 內的局部變量
• typeof 不存在的變量爲 undefined

答案:

undefined

number

第三天

• 第一個 fn 雖然在 obj 中調用，可是實際執行時是在 window 環境(由於並非 obj.fn )
• Arguments 爲類數組，執行其中方法，this 指向該 arguments

答案: 10 2

第四天

• 使用 Class 並返回實例來實現鏈式調用
• 用隊列來維護事件執行順序
• 使用延時器來模擬 Sleep
• 注意綁定 this

class ManagerClass {
  constructor(name) {
    this.taskList = [];
    console.log(`Hi I am ${name}`);
    setTimeout(() => this.next(), 0);
  }

  sleepFirst(time) {
    let fn = () => {
      console.log(`Sleep ${time}s...`);
      setTimeout(() => {
        this.next();
      }, time * 1000);
    }

    this.taskList.unshift(fn);
    return this;
  }

  sleep(time) {
    let fn = () => {
      console.log(`Sleep ${time}s...`);
      setTimeout(() => {
        this.next();
      }, time * 1000);
    }

    this.taskList.push(fn);
    return this;
  }

  eat(name) {
    let fn = () => {
      console.log(`I am eating ${name}`);
      this.next();
    }

    this.taskList.push(fn);
    return this;
  }

  next() {
    let fn = this.taskList.shift();

    fn && fn();
  }
}

function Manager(name) {
  return new ManagerClass(name);
}

Manager('AddOne').eat('breakfast').eat('lunch').sleepFirst(2).sleep(1).eat('dinner');
複製代碼

第五天

CSS

請用一種簡單方案實現如圖效果

第一種：繪製三角形後定位到左上角

第二種：漸變

background:linear-gradient(135deg, #F3AC3C 100px, #0B2429 0);
複製代碼

JS

使用 requestAnimationFrame 實現一個 setInterval

• 注意 requestAnimationFrame 的使用方法便可

function setInterval(func, interval) {
  let last = +new Date();
  let timer;

  const loop = () => {
    let now = +new Date();
    timer = window.requestAnimationFrame(loop);
    if(now - last >= interval) {
      last = now;
      func(timer);
    }
  }

  timer = window.requestAnimationFrame(loop);

  return timer;
}

let count = 0;
setInterval(timer => {
  console.log(1);
  count++;
  if(count === 5) cancelAnimationFrame(timer);
}, 1000)
複製代碼

廣告

天天羣內會發一道技術小題，每週末會有視頻技術分享和前端題覆盤。

只面向前端大學生，但願積極活躍的你進羣聊生活聊技術聊Idea。

歡迎大學生前端進羣交流呀 ~ 小羣人數很少，進羣就是朋友，之後規模也會限制在50人左右~