js相关知识点

1. promise

1.1 实现红绿灯

function red() {
  console.log('red')
}
function green() {
  console.log('green')
}
function yellow() {
  console.log('yellow')
}

const light = (timer, cb) => {
  return new Promise(resolve => {
    setTimeout(() => {
      cb()
      resolve()
    }, timer)
  })
}

const step = function () {
  Promise.resolve()
    .then(() => {
      return light(3000, red)
    })
    .then(() => {
      return light(2000, yellow)
    })
    .then(() => {
      return light(1000, green)
    })
    .then(() => {
      return step()
    })
}

step()

• 使用 await 实现

function getLight(fn, timer) {
  return new Promise(resolve => {
    setTimeout(() => {
      fn()
      resolve()
    }, timer * 1000)
  })
}
function red() {
  console.log('red')
}
function green() {
  console.log('green')
}
function yello() {
  console.log('yello')
}

async function run() {
  await getLight(red, 30)
  await getLight(green, 20)
  await getLight(yello, 10)
  run()
}

run()

1.2 实现每秒自动加一

其实，这道题就是上面那道题的变形。

let count = 0

const addOne = () => {
  count = count + 1
  console.log(count)
}
const addOneByOneSecond = (timer, cb) => {
  return new Promise(resolve => {
    setTimeout(() => {
      cb()
      resolve()
    }, timer)
  })
}

const finalFunc = () => {
  Promise.resolve()
    .then(() => {
      return addOneByOneSecond(1000, addOne)
    })
    .then(() => {
      return finalFunc()
    })
}

finalFunc()

1.3 Promise.all

function myPromiseAll(promises) {
  return new Promise((resolve, reject) => {
    const res = []
    let finished = 0

    promises.forEach((p, i) => {
      Promise.resolve(p).then(v => {
        res[i] = v
        finished++
        if (finished === promises.length) resolve(res)
      }, reject)
    })
  })
}

1.4 Promise.allsettled

function myPromiseAllSettled(promises) {
  return new Promise(resolve => {
    const results = []
    let count = 0
    const arr = Array.from(promises)

    if (arr.length === 0) {
      resolve([])
    }

    arr.forEach((p, index) => {
      Promise.resolve(p)
        .then(value => {
          results[index] = {
            status: "fulfilled",
            value
          }
        })
        .catch(reason => {
          results[index] = {
            status: "rejected",
            reason
          }
        })
        .finally(() => {
          count++

          if (count === arr.length) {
            resolve(results)
          }
        })
    })
  })
}