手写题目一：手写节流和手写防抖

start

• 最近高频出现防抖节流的问题。
• 要求是可以手写。

1.概念

1. 防抖：防止抖动, 短时间内触发多次，最终只触发一次;
2. 节流：减少流量，短时间内触发多次，我每隔一段时间触发一次;

2.手写防抖

代码

// 防抖
function debounce(fn, wait,) {
  var timer
  return function () {
    var that = this
    var arg = arguments
    clearTimeout(timer)
    timer = setTimeout(function () {
      fn.apply(that, arg)
    }, wait)
  }
}

思路

1. 首先肯定要定义一个函数；
2. 函数的参数是，一个是需要被执行的函数fn，一个是等待时间wait；
3. 需要定义一个匿名函数当做返回值；
4. 定时器，等待wait时间；
5. 处理fn的this，处理参数arguments；
6. 定义一个变量 timer，存储定时器的值。
7. 定时器处理的核心逻辑： 只要当前函数执行了，就清除之前的，重新定义。

2.节流

代码

// 节流
function throttle(fn, wait) {
  var timer
  return function () {
    var that = this
    var args = arguments
    if (!timer) {
      timer = setTimeout(function () {
        timer = null
        fn.apply(that, args)
      }, wait)
    }
  }
}

思路

1. 首先肯定要定义一个函数；
2. 函数的参数是，一个是需要被执行的函数fn，一个是等待时间wait；
3. 需要定义一个匿名函数当做返回值；
4. 定时器，等待wait时间；
5. 处理fn的this，处理参数arguments；
6. 定义一个变量 timer，存储定时器的值。
7. 定时器处理的核心逻辑： 不存在定时器再重新初始化，在定时器执行完毕后，清空定时器。

end

• 主要的核心逻辑就上述代码。
• 再额外的拓展就是：1.取消定时器的功能；2.是否立即执行的功能等配置项；