JavaScript | 节流

简介

节流是一种常用的优化前端性能的技术，它可以控制事件触发的频率。在高频率触发事件时，节流会以一定间隔时间执行回调函数，减少对页面性能的影响。

背景

在开发过程中，我们经常遇到一些高频事件触发的场景，比如窗口大小变化、滚动条滚动、鼠标移动等。如果每次事件触发都去执行相应代码，会让页面性能受到影响，甚至导致浏览器卡死。

为了防止这种情况的发生，我们可以使用节流技术，让事件在一定时间间隔内只触发一次，从而减少对页面性能的影响。

实现方式

节流有两种实现方式，分别是定时器实现和时间戳实现。

定时器实现

定时器实现是在事件触发后立即设置一个定时器，定时器最后执行时触发相应代码。如果在定时器执行前又触发了事件，定时器就会被清除，重新等待该事件的触发。

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

时间戳实现

时间戳实现是通过记录事件触发时间戳来进行节流的，在事件触发时判断当前时间戳与上次触发时间戳的差值是否超过一定时间。如果超过了设定时间，就执行相应代码，保存当前时间戳。如果没有超过，就放弃这次触发。

function throttle(func, delay) {
  let prevTime = 0;
  return function () {
    let context = this;
    let args = arguments;
    let nowTime = new Date().getTime();
    if (nowTime - prevTime >= delay) {
      func.apply(context, args);
      prevTime = nowTime;
    }
  };
}

应用场景

• 页面滚动：当用户快速滚动页面时，触发频率高，使用节流可以减少滚动事件的触发次数，减轻页面的压力。
• 搜索框搜索：当用户输入时，频繁发送请求会增加服务器压力，使用节流可以减少请求发送的频率，节省服务器资源。
• 窗口大小变化：当用户快速改变窗口大小时，触发频率高，使用节流可以让窗口大小改变后间隔一段时间再执行相应代码，减少页面重绘次数。

小结

通过使用节流技术，可以有效减少高频事件触发时的代码执行次数，提高页面性能和用户体验。在实现节流时，可以根据具体的场景选择定时器实现或者时间戳实现，以达到最佳的效果。