实现防抖和节流

[BetaSu]

要实现的功能

请按照以下顺序回答该问题：

1.什么是防抖和节流？
2.应用场景有哪些？
3.手写防抖和节流，简单版本即可。

代码示例

function debounce() {
  // ...
}

function throttling() {
  // ...
}

最佳答案评选标准

1. 请写出实现思路、代码，并为代码的关键步骤增写注释
2. 附带测试用例是加分项
3. 不需要考虑异常发生
4. 实现简单版本的基础上，能提出可以优化的扩展点是加分项

最佳答案

悬赏中，欢迎作答...

答题同学须知

• 答题规范：请在一次评论中完成作答，后续修改也请编辑该评论，而不是追加新的评论

• 评选标准：最佳答案由围观同学的 👍 和卡颂共同决定

• 评选时间：一般是问题发布24小时后评选，如果问题发布当天回答数较少，问题悬赏金额可能增加，同时悬赏时间也会增加

围观同学须知

• 对于你满意的答案，请不要吝惜你的 👍，这是评选最佳答案的依据

• 非答题的评论会被删除，问题相关讨论请在赏金猎人群中进行

[Stan9726]

防抖

/**
 * 函数防抖：短时间内多次触发同一事件，只执行第一次或者最后一次，中间的不执行
 */
/**
 * @param {function} func 事件响应函数
 * @param {number} delay 延迟时间
 * @param {boolean} imme 是否立即执行
 */
function debounce(func, delay, imme) {
  var timer

  return function () {
    var _self = this,
      _args = arguments,
      res

    if (timer) clearTimeout(timer)

    if (imme) {
      /**
       * 触发事件后立即执行，指定时间内不再执行，若指定时间内再次触发则重置定时
       * 例如，点击按钮进行提交
       */
      if (!timer) res = func.apply(_self, _args)

      timer = setTimeout(function () {
        timer = null
      }, delay)
    } else {
      /**
       * 触发事件指定时间后执行，若指定时间内再次触发则重置定时
       * 例如，输入框内容判断
       */
      timer = setTimeout(function () {
        res = func.apply(_self, _args)
      }, delay)
    }

    return res
  }
}

节流

/**
 * 函数节流：一段时间内多次触发同一事件，但只按指定时间间隔执行
 * 例如，图片懒加载
 */
/**
 * @param {function} func 事件响应函数
 * @param {number} delay 间隔时间
 */
/**
 * 通过计算时间间隔
 * 问题：最后一次触发不会执行
 */
function throttle(func, delay) {
  // var begin = new Date().getTime()
  var begin = 0

  return function () {
    var _self = this,
      args = arguments,
      res,
      now = new Date().getTime()

    if (now - begin > delay) {
      res = func.apply(_self, args)
      begin = now
    }

    return res
  }
}

/**
 * 通过定时器
 * 问题：第一次触发不会立即执行
 */
function throttle(func, delay) {
  var timer

  return function () {
    var _self = this,
      _args = arguments,
      res

    if (!timer) {
      timer = setTimeout(function () {
        timer = null
        res = func.apply(_self, _args)
      }, delay)
    }

    return res
  }
}

/**
 * 最终版：通过定时器 + 计算时间间隔
 */
function throttle(func, delay) {
  var begin = 0,
    timer

  return function () {
    var _self = this,
      _args = arguments,
      res,
      now = new Date().getTime()

    if (now - begin >= delay) {
      if (timer) {
        clearTimeout(timer)
        timer = null
      }

      begin = now
      res = func.apply(_self, _args)
    } else if (!timer) {
      timer = setTimeout(function () {
        timer = null
        res = func.apply(_self, _args)
      }, delay)
    }

    return res
  }
}

[QiuShuiDyp]

防抖

防抖原理

维护一个计时器，在规定的delay时间后触发函数，在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

应用场景

• 验证文本输入。搜索框输入、手机号、邮箱验证输入检测等
• 窗口大小resize。只需窗口调整完之后，计算窗口大小，防止重复渲染。
• 监视滚动（scroll）时间（在添加去抖动后滚动，只有在用户停止滚动后才会确定它是否已到达页面底部）。

实现代码

function fn(...arg) {
  console.log (arg[0]);  //输出events对象
}
//防抖-频繁触发，只有最后一次会生效
function debounce(fn, delay=500){
    //定时器初始化
    let timer = null
    //通过闭包的方式，来获取定时器，同时返回onclick调用的函数
    return function(){
      timer && clearTimeout(timer)
      timer = setTimeout(()=>{
        //这里的arguments为外层的arguments（包含了event事件对象），箭头函数没有自己的arguments
        fn(arguments)
      }, delay)
    }
  }
document.getElementById('btn').onclick = debounce(fn, 1000)

节流

节流原理

函数执行一次后，只有在大于设置的执行周期后才会执行第二次。持续触发事件时，保证一定时间段内只调用一次事件处理函数。

应用场景

• 实现DOM元素的拖放功能mousemove
• 计算鼠标移动距离

节流实现

function throttle(fn, delay){
  //时间初始化
  let oldTime = 0
  return function(){
    lastTime = Date.now()
    if((lastTime - oldTime)> delay){
      fn(arguments)
      //记录触发的时间作为oldTime
      oldTime = lastTime
    }
  }
}
document.onscroll = throttle(fn, 1000)

两者区别

节流旨在时间段内控制触发的频率，防抖则是旨在时间段内只触发最后一次。