我正在参加「掘金·启航计划」

一、防抖和节流的区别

当事件密集触发时：

• 防抖函数是不断地对触发事件做延迟，等到一定时间没有事件触发才执行函数
• 节流函数是按照一定频率执行函数

二、防抖和节流的应用

防抖的应用场景：

• 输入框频繁的输入内容，搜索或者提交信息；
• 频繁的点击按钮，触发某个事件；

节流的应用场景：

• 监听页面的滚动事件；
• 鼠标移动事件

三、防抖和节流的实现

1. 通过一些第三方库实现

使用Underscore

• 直接通过CDN引入：

<script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>

2. 手写实现

防抖函数基本实现

没有立即执行、取消功能、函数返回值的功能哦

function debounce(fn, delay) {
  // 1.定义一个定时器, 保存上一次的定时器
  let timer = null

  // 2.真正执行的函数
  const _debounce = function() {
    // 取消上一次的定时器
    if (timer) clearTimeout(timer)
    // 延迟执行
    timer = setTimeout(() => {
      // 外部传入的真正要执行的函数
      fn()//独立函数调用，this指向window 又没有传参数，所以event是undefined
    }, delay)
  }

  return _debounce
}

节流函数基本实现

默认第一次触发执行，最后一次触发没有到时间不执行

function throttle(fn, interval, options) {
  // 1.记录上一次的开始时间
  let lastTime = 0

  // 2.事件触发时, 真正执行的函数
  const _throttle = function() {

    // 2.1.获取当前事件触发时的时间
    const nowTime = new Date().getTime()

    // 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
    const remainTime = interval - (nowTime - lastTime)
    if (remainTime <= 0) {
      // 2.3.真正触发函数
      fn()
      // 2.4.保留上次触发的时间
      lastTime = nowTime
    }
  }

  return _throttle
}