学习一下常说的节流

start

节流(throttle),减少流量，短时间内触发多次，我每隔一段时间触发一次;

手写

节流
还是之前的输入框输入事件的案例，来手写一个版本。需求呢：短时间输入多次内容，我每隔 1 秒触发一次

DOCTYPE html>
<html lang="en">
  <body>
    <input type="text" id="in" />

    <script>
      var input = document.querySelector('#in')

      let say = function (e) {
        console.log('值改变事件', +new Date())
      }

      input.addEventListener('keydown', throttle(say, 1000))

      function throttle(fn, wait) {
        // 1. 和防抖类似，接收两个参数：函数，间隔时间

        // 2. 定义一个变量存储定时器
        var timer
        // 3. 定义一个变量存储第一次执行的时间
        var start = 0

        return function () {
          // 4. 获取当前时间
          var now = +new Date()

          // 5.由于要使用定时器，所以这里存储一下 this 和 arguments
          var that = this
          var arg = arguments

          // 6.是否满足节流的时间限制
          if (start + wait <= now) {
            // 7. 如果之前有定时器 清除
            if (timer) {
              clearTimeout(timer)
              timer = null
            }

            // 8. 满足条件，存储一下当前时间，然后允许执行
            start = now
            fn.apply(that, arg)
          } else if (!timer) {
            // 9.如果不满足节流限制，且没有定时器，添加一个定时器
            timer = setTimeout(function () {
              // 10. 定时器中需要记录定时器执行的时间，
              start = now
              fn.apply(that, arg)
            }, wait)
          }
        }
      }
    script>
  body>
html>
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

手写防抖的总结：

start 需要设置默认值 0；不然在start + wait中会返回 NaN
+new Date() 算是第一次接触，简单来说效果等同于 new Date().getTime, 作用就是：获取当前时间的时间戳；
其次就是 if 中的逻辑可能一开始不好理解，简单来说，满足时间限制，执行函数；不满足时间限制添加一个定时器稍后执行。

总结：

防抖节流，

防抖是，一段时间内多次触发只执行一次。
节流是，一段时间内多次触发，按时间段执行。

同样是输入框的键盘事件，两者具体使用谁，还是需要看具体的业务场景。本质都是对高频触发的事件做的优化。

end

加油

相关阅读:
AC自动机：Tire树+KMP
【开源教程19】疯壳·开源编队无人机-中断（按键检测）
栈和队列实现的思路和代码
SpringMVC总结
【JVM】垃圾回收机制中，对象进入老年代的触发条件
数据治理的核心是什么？_光点科技
汇编语言与接口技术笔记（持续更新）
基于Open3D的点云处理20- 基于Visualizer类自定义可视化
基于TensorFlow Encrypted (TFE)的隐私计算benchmark
Redis的四种模式：单机、主从、哨兵、集群

原文地址：https://blog.csdn.net/wswq2505655377/article/details/126234682

学习一下 常说的节流

start

手写

end

学习一下常说的节流