手写防抖节流手写防抖节流手写防抖节流手写防抖节流手写防抖节流手写防抖节流手写防抖节

本片文章将简单带你实现防抖和节流准备工作：

1.html部分

<div id="app">
</div>

2.css部分

<style>
#app {
  width: 300px;
  height: 8000px;
  background-color: red;
}

3.最重要的js部分来了，先来实现节流

  function throttle(fn) {
  // 获取函数刚开始执行的时间
  let prev = Date.now()
  return (() => {
    // 获取函数当前执行的时间
    let curr = Date.now()
    // 如果当前的和刚开始调用的相差1秒 就调用fn函数
    if (curr - prev > 1000) {
      fn()
      // 将函数刚开始执行的时间重置为现在 为下次触发函数做准备
      prev = curr
    }
  })
}

下面是节流的测试（当你疯狂滚动鼠标时，控制台会以1s的速度匀速打印）：

let count = 0
window.addEventListener('scroll', throttle(() => {
  console.log(count++);
}))

实现节流：

  function debounce(fn) {
  // 定义一个定时器
  let timer
  // 返回一个函数
  return () => {
    // 1s内再次触发函数时 将timer取消掉
    if (timer) clearTimeout(timer)
    // 1s后执行fn函数
    timer = setTimeout(() => {
      fn()
    }, 1000)
  }
}

下面是防抖的测试：（当你疯狂滚动鼠标时，控制台并不会有打印，但停下来一秒后，就会打印了，其实防抖跟常见的运用场景是文本框输入，但为了方便上面的节流，偷了个小懒）

let count = 0
window.addEventListener('scroll', debounce(() => {
  console.log(count++);
}))

这就是简单的防抖和节流了！！！

手写 防抖 节流

手写防抖节流