地狱猫

节流

原理

一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

作用

节省浏览器CPU资源；让页面浏览更加顺畅；减轻服务器压力

应用场景

和防抖差不多，但是也有区别。

比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

实现

  1. 时间戳
<button id="throttle">点我节流！</button>
1
<script>
  window.onload = function() {
    // 1、获取这个按钮，并绑定事件
    var mythrottle = document.getElementById("throttle");
    mythrottle.addEventListener("click", throttle(saythrottle,3000));
  }

  // 2、节流功能函数，接受传参
  function throttle(func, delay = 1000) {
    var prev = Date.now();
    return function () {
      var context = this;
      var args = arguments;
      var now = Date.now();
      if(now - prev > delay){
        func.apply(context,arguments);
        prev = Date.now();
      }
    }
  }

  // 3、需要进行节流的事件处理
  function saythrottle() {
    // ... 有些需要节流的工作，在这里执行
    console.log("节流成功！");
  }

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
  1. 定时器
<button id="throttle">点我节流！</button>
1
<script>
  window.onload = function() {
    // 1、获取这个按钮，并绑定事件
    var mythrottle = document.getElementById("throttle");
    mythrottle.addEventListener("click", throttle(saythrottle,3000));
  }

  // 2、节流功能函数，接受传参
  function throttle(func, delay = 1000) {
    var timer = null;
    return function () {
      var context = this;
      var args = arguments;

      if (!timer) {
        timer = setTimeout(function(){
          func.apply(context,arguments);
          timer = null;
        },delay)
      }
    }
  }

  // 3、需要进行节流的事件处理
  function saythrottle() {
    // ... 有些需要节流的工作，在这里执行
    console.log("节流成功！");
  }

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  1. 定时器 + 时间戳(更精确的，最后一次触发事件后也还会执行一次事件处理函数)
<button id="throttle">点我节流！</button>
1
<script>
  window.onload = function() {
    // 1、获取这个按钮，并绑定事件
    var mythrottle = document.getElementById("throttle");
    mythrottle.addEventListener("click", throttle(saythrottle,3000));
  }

  // 2、节流功能函数，接受传参
  function throttle(func, delay = 1000) {
    var timer = null;
    var startTime = Date.now();
    return function() {
      var curTime = Date.now();
      var remaining = delay - (curTime - startTime);
      var context = this;
      var args = arguments;
      clearTimeout(timer);
      if (remaining <= 0) {
        func.apply(context, args);
        startTime = Date.now();
      } else {
        timer = setTimeout(func, remaining);
      }
    }
  }

  // 3、需要进行节流的事件处理
  function saythrottle() {
    // ... 有些需要节流的工作，在这里执行
    console.log("节流成功！");
  }

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

← 重绘与回流（又叫重排）→