前端面试

基础算法

2023-02-24  本文已影响0人  Sue1024

防抖 节流

高频面试题。
防抖和节流都是为了提升性能,减少资源浪费,获得性能,资源和用户体验之间的最佳组合。
他们俩有什么区别呢?
假设事件A会引发B
事件A可能在一段时间内以较高频率P触发,比如输入事件,滚动事件,拖动事件。函数B虽然由A导致,但它不需要一直触发(假设函数B的触发频率是P-,甚至只需要出发一次(最后一次)。
那么当函数B只需要触发最后一次时,比如只需要在输入结束时发送请求(认为两秒内无后继输入则为结束),那么就是防抖。
当函数B需要以一个较低的频率P-触发时,比如拖动方块,鼠标的位置信息变化时毫秒级的,但不需要这么高频的绘制,只需要100毫秒级的绘制就可以给用户一种丝滑的体验,这就是节流。

防抖源码

const debounce = function(func, delay) {
  let timeout = null
  return function() {
    if(timeout) {
      clearTimeout(timeout)
    }
     timeout = setTimeout(() => func.call(this), delay)
  }
}

节流源码

const throttle = function(func, delay) {
  let currentTime = Date.now()
  return function() {
    if(Date.now() - currentTime >= time) {
      func.call(this);
      currentTime = Date.now()
    }
  }
}

数组相关

Reduce

Array.prototype.reduce = function(callback, initialVal) {
  const arr = this
  if(typeof callback !== 'function') {
    return
  }
  let result = initialVal!==undefined ? initialVal : arr[0]
  for(let i = 0;i<arr.length; i++) {
    result = callback(result, arr[i], i, arr)
  }
  return result
}
上一篇 下一篇

猜你喜欢

热点阅读