一文看懂如何简单实现节流函数和防抖函数

引言：

在前端开发中，我们常常需要处理一系列与用户交互相关的事件，如滚动、键盘输入、鼠标移动等等。这些事件会频繁触发，造成过多的资源浪费，因此需要使用节流和防抖函数来解决这个问题。本文将详细讲解如何实现节流和防抖函数。

一、什么是节流函数和防抖函数？

节流函数：在一段时间内，只执行一次函数。比如，一个页面上有多个滚动事件，如果每一次滚动都触发事件处理函数，可能会对性能造成影响，因此我们需要一个函数来控制一个时间段内只执行一次事件处理函数，以节约资源，这就是节流函数。

防抖函数：在一段时间内，如果多次触发同一个事件，只有最后一次触发的事件会执行函数。比如，一个搜索框需要根据用户输入的关键字动态显示数据，如果对于每一次输入都要请求一次数据，会影响性能，因此我们需要一个函数来控制一定时间内只有最后一次输入才会请求数据，这就是防抖函数。

二、如何实现节流函数？

实现思路：

使用时间戳，记录上一次执行函数的时间。
设定一个时间间隔，如果当前时间减去上一次执行函数的时间大于等于这个时间间隔，就执行函数，并更新上一次执行函数的时间。
代码示例：

function throttle(fn, delay) {
  let timer = null;
  let start_time = 0;

  return function() {
    let current_time = +new Date();
    let diff = current_time - start_time;

    if (!start_time || diff >= delay) {
      fn.apply(this, arguments);
      start_time = current_time;
    } else if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, arguments);
        start_time = +new Date();
        timer = null;
      }, delay - diff);
    }
  }
}

代码解析：

使用闭包保存定时器变量 timer 和上一次执行函数的时间 start_time。
计算当前时间和上一次执行函数的时间差 diff，如果 diff 大于等于时间间隔 delay 或者还没有执行过函数，则执行函数，并更新 start_time。
如果 diff 小于时间间隔 delay，说明还没有到时间间隔，此时需要使用定时器 setTimeout 来控制函数的执行，直到等待的时间间隔 delay 到达后，才执行函数并更新 start_time 以及清空定时器 timer。

三、如何实现防抖函数？

实现思路：

使用定时器和闭包，记录上一次触发事件的时间。
设定一个时间间隔，如果当前时间减去上一次触发事件的时间小于这个时间间隔，就清空定时器并重新设定一个新的定时器，等待下一次触发事件。
如果当前时间减去上一次触发事件的时间大于等于时间间隔，则执行函数并重新记录上一次触发事件的时间。
代码示例：

function debounce(fn, delay) {
  let timer = null;

  return function() {
    if (timer) {
      clearTimeout(timer);
    }

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

代码解析：

使用闭包保存定时器变量 timer。
如果在时间间隔内再次触发事件，则清空定时器并重新设定一个新的定时器。
如果时间间隔后触发事件，则执行函数，并清空定时器 timer。

四、实战示例

接下来我们用一个实战示例来演示如何使用节流和防抖函数。

实现需求：

当浏览器窗口滚动时，输出对应窗口位置的 top 值和 left 值，并使用节流函数和防抖函数来控制输出频率。

代码示例：

// 节流函数实现
function throttle(fn, delay) {
  let timer = null;
  let start_time = 0;

  return function() {
    let current_time = +new Date();
    let diff = current_time - start_time;

    if (!start_time || diff >= delay) {
      fn.apply(this, arguments);
      start_time = current_time;
    } else if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, arguments);
        start_time = +new Date();
        timer = null;
      }, delay - diff);
    }
  }
}

// 防抖函数实现
function debounce(fn, delay) {
  let timer = null;

  return function() {
    if (timer) {
      clearTimeout(timer);
    }

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

let output1 = throttle(() => {
  console.log(`window top: ${window.scrollY}`);
  console.log(`window left: ${window.scrollX}`);
}, 200);

let output2 = debounce(() => {
  console.log(`window top: ${window.scrollY}`);
  console.log(`window left: ${window.scrollX}`);
}, 200);

window.addEventListener('scroll', () => {
  output1();
  output2();
});

代码解析：

定义节流函数 throttle 和防抖函数 debounce。
使用节流函数和防抖函数来处理输出函数，控制输出频率。
在滚动事件上添加事件监听器，分别使用上述定义的节流函数和防抖函数来输出窗口的 top 值和 left 值。

总结：

本文详细讲解了如何使用节流函数和防抖函数来控制事件的频次，从而提高页面的性能。同时，本文还给出了相关的代码实现，并进行了详细解释和分析。希望本文能够对你的前端开发工作有所帮助。