Throttle函数节流为什么需要函数节流当事件频繁触发的时候，回调函数是网络请求或者一些其他函数的时候，会占用大量资

为什么需要函数节流

当事件频繁触发的时候，回调函数是网络请求或者一些其他函数的时候，会占用大量资源，降低用户的体验。这里会频繁触发的事件主要有scroll、mousemove、keydown、keyup、resize等。

下面是事件频繁触发的例子：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>debounce</title>
  <style>
    #container{
      width: 100%;
      height: 300px;
      line-height: 300px;
      text-align: center;
      background-color: #555;
      color: #fff;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script>
  let count = 1;
  const container = document.getElementById('container');
  const getUserAction = () => {
    container.innerHTML = count++
  }
  container.onmousemove = getUserAction;
  </script>
</body>

</html>

2022-11-23 12.06.14.gif

节流函数原理

节流函数的原理是：持续触发事件，每隔一段时间，回调函数只执行一次。关于节流函数的实现方式主要有两种，使用时间戳和定时器

时间戳实现节流

使用时间戳实现节流的是方式是，当触发事件时，取出触发事件的时间戳now，然后减去之前的时间戳previous（最开始设置为0），如果差大于设置的时间周期，就执行函数，然后更新之前的时间戳previous为当前的事件now，如果小于则不执行。

  function throttle(func, delay) {
    let previous = 0;
    return (...param) => {
      let now = new Date().getTime();
      if (now - previous > delay) {
        func.apply(this, param);
        previous = now;
      }
    }
  }

使用时间戳实现节流，首次触发事件函数会立即执行，如果在delay时间内停止触发事件，函数将不会执行。

在上面的例子中使用throttle函数

  container.onmousemove = throttle(getUserAction, 3000);

具体效果请看示例：

2022-11-24 15.00.52.gif

定时器实现节流

使用定时器实现节流，首次触发事件在delay毫秒后设置定时器。再次触发事件时，如果定时器存在，则不执行，直到在delay毫秒后setTimeout函数执行后，将定时器清空后，再次重新设置下一个定时器。

  function throttle(func, delay) {
    let timeout;
    return (...param) => {
      if (!timeout) {
        timeout = setTimeout(() => {
          func.apply(this, param);
          timeout = null;
        }, delay);
      }
    }
  }

在例子中使用throttle函数

  container.onmousemove = throttle(getUserAction, 3000);

使用定时器实现节流，首次触发事件函数会在delay毫秒后执行，如果在delay毫秒后停止触发事件，依然会触发一次。

具体效果如下图所示：

2022-11-24 15.25.18.gif

以上就是关于函数节流的一些知识，供自己记录和掘友们参考