函数的节流与函数的防抖

1，概念：函数防抖
1，定义
在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。
,2，实现原理
函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，知道函数请求停止并超过时间间隔才会执行。
3，使用场景
文本框输入搜索（连续输入时避免多次请求接口）

防抖函数的封装

export function debounce(fn = () => {}, delay = 200, now = false) {
  let __timer__ = null

  return function(...rest) {
    //清除上一次延时器
    __timer__ && clearTimeout(__timer__)

    if (now) fn.apply(this, rest)

    __timer__ = setTimeout(() => {
      fn.apply(this, rest)
    }, delay)
  }
}

函数的节流
1，定义
规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效； 典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效。
,2，实现原理
其原理是用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发 scroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段，如果是，则执行，并更新上次执行的时间戳，
3，使用场景
resize、scroll、mousemove等事件触发监听
节流函数的封装

//节流
export function throttle(fn = () => {}, period = 200) {
  let _laseTime = null
  let _timer = null
  return function(...args) {
    const _nowTime = +new Date()
    _timer && clearTimeout(_timer)
    if (_laseTime && _nowTime - _laseTime > period) {
      fn.apply(this, args)
      _laseTime = _nowTime
    } else {
      _timer = setTimeout(fn.bind(this, args), period)
    }
  }
}

详解看
写的很好