防抖 節(jié)流

高頻面試題。
防抖和節(jié)流都是為了提升性能，減少資源浪費(fèi)，獲得性能，資源和用戶體驗(yàn)之間的最佳組合。
他們倆有什么區(qū)別呢？
假設(shè)事件A會(huì)引發(fā)B
事件A可能在一段時(shí)間內(nèi)以較高頻率P觸發(fā)，比如輸入事件，滾動(dòng)事件，拖動(dòng)事件。函數(shù)B雖然由A導(dǎo)致，但它不需要一直觸發(fā)（假設(shè)函數(shù)B的觸發(fā)頻率是P-，甚至只需要出發(fā)一次（最后一次）。
那么當(dāng)函數(shù)B只需要觸發(fā)最后一次時(shí)，比如只需要在輸入結(jié)束時(shí)發(fā)送請(qǐng)求（認(rèn)為兩秒內(nèi)無后繼輸入則為結(jié)束），那么就是防抖。
當(dāng)函數(shù)B需要以一個(gè)較低的頻率P-觸發(fā)時(shí)，比如拖動(dòng)方塊，鼠標(biāo)的位置信息變化時(shí)毫秒級(jí)的，但不需要這么高頻的繪制，只需要100毫秒級(jí)的繪制就可以給用戶一種絲滑的體驗(yàn)，這就是節(jié)流。

防抖源碼

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

節(jié)流源碼

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

數(shù)組相關(guān)

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
}