节流和防抖的实现及其应用

Posted 2020-12-16 fcblog2022

防抖(debounce) 节流(throttle)

一、 什么是防抖

• 含义

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间，即如果在n秒内

再次触发该事件，会清除前一次的延时函数

• 代码实现

  // 防抖
  function debounce(fn, delay = 500) {
      // timer 是闭包中的
      let timer = null
  
      return function () {
          if (timer) {
              clearTimeout(timer)
          }
          timer = setTimeout(() => {
              fn.apply(this, arguments)
              timer = null
          }, delay)
      }
  }
  

• 应用场景

  • 搜索（例如百度呀关键字）input不是一改变就向服务器发送请求

二、 什么是节流

• 描述

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

• 代码实现

// 节流
function throttle(fn, delay = 100) {
    let timer = null

    return function () {
        if (timer) {
            return
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

• 应用场景
  • 鼠标拖拽或移动物返回其位置 例如drag事件
  • 鼠标不断点击触发，mousedown(单位时间内只触发一次)
  • 监听滚动事件 例如获取滚动位置 不需要触发那么快

三、总结

• 防抖和节流都是为了解决频繁触发某个事件的情况造成的性能消耗
• 防抖就是在出发后的一段时间内执行一次，再次触发会取消前一次
• 节流就是在频繁触发某个事件的情况下，每隔一段时间请求一次

四、实际项目中

一般在实际项目中我们可以直接用库import _ from ‘lodash‘;

vue中用法如下

• 1.导入import _ from ‘lodash‘;
• 2.用 函数名：__.debounce(function(){},deley)