聊一聊函数节流和函数防抖

Posted 2022-11-24 四点水的点滴记录

聊一聊函数防抖和函数节流

在日常的“敏捷开发”，一味地为了快速的完成需求，其中遇到一个以前经常需要做到的而又懒得去优化的需求–滑动加载更多数据，也就是分页。算是脑抽啥的想优化一下代码性能。于是就想到了函数防抖和函数节流的应用场景和原理。
对于大多数人来说，这可能都是用到烂的技术。只能感慨一句。

那么废话少说，我们先来了解一下这两个分别的概念

概念

函数防抖(debounce)

函数防抖是指触发事件后在一定的时间内，函数只能执行一次，如果在这个时间段内重新触发事件会重新计算执行时间。简单来说，就是一定时间内连续多次触发事件，方法只在最后一次触发事件的时候执行。

函数节流(throttle)

函数节流是指预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。简单来说，就是限制一个方法在一定时间内执行一次。

常用的应用场景

函数防抖(debounce)

• 根据输入的内容检索，当一定时间内没有输入，执行检索结果的展示。
• 调整窗口的大小，当一定时间内没有调整，计算窗口的大小。
• 多次点击按钮，当一定时间内执行执行一次点击事件。
  函数节流(throttle)
• 滚动加载更多数据，监听到滚动到底部加载数据
• 搜索联动

实现原理

使用定时器实现的函数防抖

function debounce(fn, delay = 500)
  let timer = null;
  return function () 
    if(timer)
      clearTimeout(timer);
    
    timer = setTimeout(()=>
      fn.apply(this, arguments)
      timer = null
    , delay);
  ;
;

// 应用例子 输入框输入检索
let input = document.getElementsByTagName('input')[0];
input.addEventListener('keyup', debounce(function ()
  console.log(this.value)
, 500))

通过闭包标记保存setTimeout，每当用户输入的时候把前一个setTimeout清除掉，在创建一个新的setTimeout，保证输入字符后在一定的时间间隔内如果还有字符输入就不执行fn方法。

使用定时器实现的函数节流

function throttle(fn, delay = 100) 
  let timer = null
  return function () 
    if(timer)
      return
    
    timer = setTimeout(()=>
      fn.apply(this, arguments)
      timer = null
    , delay)
  

// 应用例子 判断滚动到底部
window.addEventListener('scroll', throttle(function ()
  let scrollTop = document.documentElement.scrollTop
    || document.body.scrollTop;
  let clientHeight = document.documentElement.clientHeight
    || document.body.clientHeight;
  let scrollHeight = document.documentElement.scrollHeight
    || document.body.scrollHeight;
  if (scrollTop + clientHeight === scrollHeight) 
     console.log('end');
  
, 100))

通过闭包标记保存setTimeout，每当用户滚动的时候判断是否有标记存在，存在则return跳过，不存在则标记一个setTimeout并在回调方法执行后将标记重置为null。

异同比较

相同点

• 通过 setTimeout 实现
• 目的都是为了降低执行频率，节省计算资源
  不同点
• 函数防抖在一段连续操作结束后处理回调。函数节流在一段连续操作中，每隔一段时间执行一次。

---

好了，以上就是这次整理的关于函数节流和函数防抖的理解，希望能给大家一点帮助，临近年底，先祝大家kpi满满，年终丰收，我们下期再见。