你也许不知道，你与节流去抖只差一篇入门教程！

前端

2023-09-20 21:24:02

前言

在前端开发中，经常会遇到需要对事件进行处理的情况，比如点击、滚动、输入等。如果我们对这些事件进行频繁的监听，会导致性能下降，甚至出现卡顿等问题。为了解决这个问题，我们需要使用节流和去抖技术来优化事件的处理。

一、什么是节流？

节流是指在一段时间内只允许执行一次函数。即使在该段时间内事件被触发多次，函数也只执行一次。

二、节流的实现

节流函数的实现有很多种，这里介绍两种常用的方法：

1. 定时器方法

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

2. 时间戳方法

function throttle(fn, delay) {
  let lastTime = 0;
  return function () {
    let args = arguments;
    let now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}

三、节流的应用场景

节流函数的应用场景有很多，这里列举几个常见的例子：

搜索框输入时的实时联想
监听 scroll 事件计算位置信息
监听 resize 事件计算尺寸信息

四、什么是去抖？

去抖是指在一段时间内只执行一次函数。如果在该段时间内事件被触发多次，函数只执行最后一次。

五、去抖的实现

去抖函数的实现也有很多种，这里介绍两种常用的方法：

1. 定时器方法

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

2. 时间戳方法

function debounce(fn, delay) {
  let lastTime = 0;
  return function () {
    let args = arguments;
    let now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}