使用函数创建交互式前端：节流和防抖

2023-10-30 17:28:14

前言

在前端开发中，我们经常会遇到需要处理大量事件的情况，比如鼠标移动、滚动、键盘输入等。如果我们对这些事件不加处理，可能会导致页面性能下降，甚至出现卡顿的情况。

节流函数

节流函数是一种用来限制函数执行频率的函数。它确保某个函数在一段时间内只执行一次，无论这个函数被触发了多少次。节流函数的实现方式是使用定时器。当函数第一次执行时，设定一个定时器。之后调用时，如果发现已经设定过定时器，就清空之前的定时器，并重新设定一个定时器。这样，函数只能在定时器到期后执行一次。

节流函数的实现

function throttle(func, wait) {
  let timer;
  return function (...args) {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, wait);
    }
  };
}

节流函数的应用场景

节流函数可以应用在以下场景：

处理鼠标移动事件。当鼠标移动时，我们可以使用节流函数来限制鼠标移动事件的触发频率，这样可以减少浏览器的计算量，提高页面的性能。
处理滚动事件。当页面滚动时，我们可以使用节流函数来限制滚动事件的触发频率，这样可以减少浏览器的计算量，提高页面的性能。
处理键盘输入事件。当用户输入键盘时，我们可以使用节流函数来限制键盘输入事件的触发频率，这样可以防止用户在短时间内输入过多内容，导致页面卡顿。

防抖函数

防抖函数是一种用来延迟函数执行的函数。它确保某个函数在一段时间内只执行最后一次。防抖函数的实现方式也是使用定时器。当函数第一次执行时，设定一个定时器。之后调用时，如果发现已经设定过定时器，就清空之前的定时器，并重新设定一个定时器。这样，函数只能在定时器到期后执行一次，而且是最后一次调用时的函数。

防抖函数的实现

function debounce(func, wait) {
  let timer;
  return function (...args) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func.apply(this, args);
      timer = null;
    }, wait);
  };
}