js基础函数

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情

使用setTimeout写一个setInterval

使用setTimeout实现setInterval不过是将setTimeout包装成一个函数，在setTimeout方法执行完毕后，重新调用一下这个函数而已

function interval (cb, time = 0) {
  let timer = null
  let myInterval = () => {
    timer = setTimeout(() => {
      cb()
      myInterval()
    }, time)
  }
  myInterval()
  return () => {
    clearTimeout(timer)
  }

}
var clearInterval= interval(() => {
  console.log(23)
}, 1000)
setTimeout(() => {
  clearInterval()
}, 3000)

使用setInterval实现setTimeout

使用setInterval实现setTimeout不过是，将setInterval定时器首次执行完毕后就立即清空这个计时器。不知道这个无聊的问题，发起人的目的是什么

function mySetTimeout (cb, delay) {
  let timer = setInterval(() => {
    cb()
    clearInterval(timer)
  }, delay)
}

mySetTimeout(() => {
  console.log('ok')
}, 3000)

防抖

防抖的目的是避免频繁的函数调用浪费性能，所以假如函数一直被调用，那么这个函数一直也不会执行，直到触发这个函数执行的动作结束后，函数才真的执行

function debounce (fn, delay) {
  let timer
  return function (...res) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(function () {
      fn.apply(null, res)
      timer = null
    }, delay)
  }
}

节流

节流的目的就是让函数在一定时间段内最多触发一次。防止重复处罚浪费性能。将 fn.apply(null, res) 写在定时器的前面，初次触发函数会立即执行，如果放在里面，初次触发的时间将是在这个限制时间结束后。

function throttle (fn, delay) {
  let timer
  return function (...res) {
    if (timer) {
      return
    }
    fn.apply(null, res)
    timer = setTimeout(function () {
      timer = null
    }, delay)
  }
}

比较两个非同一个引用对象是否相同

比的不是内存地址，而是每个对象的属性是否完全相同，预期是期望 const obj1 = { a: 100, b: { x: 10, y: 20 } }

const obj2 = { a: 100, b: { x: 10, y: 20 } } 这两个对象相同

// isEqual
function notObj (o) {
  return typeof o !== 'object' || o === null
}
function isEqual (obj1, obj2) {
  if (notObj(obj1) || notObj(obj2)) {
    return obj1 === obj2
  }
  const key1 = Object.keys(obj1)
  const key2 = Object.keys(obj2)
  if (key1.length !== key2.length) {
    return false
  }
  for (const key in obj1) {
    const res = isEqual(obj1[key], obj2[key])
    if (!res) {
      return false
    }
  }
  return true
}