js防抖和节流

web开发中常常会作滚动监听，好比商品分类功能：左右两列，左侧类目，右侧商品，须要监听右测商品列表的滚动，滚到哪一个类目区间，左侧就点亮哪一个类目标签。若是在滚动的过程当中一直监听而不作性能优化的话，浏览器是很容易卡死的。下面提供两种优化性能的方法：

一、防抖：在滚动过程当中不执行操做，只在结束滚动一段时间内再也不滚动才执行，这里的一段时间能够是500毫秒也能够是1秒，视具体业务而定。

// js防抖核心代码

function debounce (fn, delay) {
  let timer = null
  // 闭包
  return () => {
    // 若是当前正处在某个计时过程当中，那么就清除这次计时开始下一次计时，
    // 不然不清除，直接开始下一次计时，计时满delay毫秒后才会触发fn函数。
    if (timer) {
      clearTimeout(timer)
    }
    // 开始下一次计时
    timer = setTimeout(fn, delay)
  }
}

function handleScroll () {
  console.log('滑动后一秒钟内再也不滑动我就执行一次', Math.random())
}

window.addEventListener('scroll', debounce(handleScroll, 1000))

查看演示请狠狠地点击：js防抖demo

二、节流：若是但愿即节省性能又不牺牲用户体验，就仍然在滚动中实时监听，只不过下降监听的“频率”，好比1秒才执行一次。下面提供两种实现方法（时间戳、定时器）。

// js节流核心代码

// 时间戳
function throttle1 (fn, delay) {
  let prev = Date.now()
  // 闭包
  return () => {
    let now = Date.now()
    if (now - prev >= delay) {
      fn()
      prev = Date.now()
    }
  }
}

// 定时器
function throttle2 (fn, delay) {
  let timer = null
  // 闭包
  return () => {
    if (!timer) {
      timer = setTimeout(() => {
        fn()
        timer = null
      }, delay)
    }
  }
}

function handleScroll () {
  console.log('滑动过程当中我一秒钟才执行一次', Math.random())
}

window.addEventListener('scroll', throttle1(handleScroll, 1000))
// window.addEventListener('scroll', throttle2(handleScroll, 1000))

查看演示请狠狠地点击：js节流demo