节流 你会手写吗？

节流

在各大面试题中，频繁出现的老油条，节流。

啥叫节流呢？

节流（throttle）：每次触发定时器后，直到这个定时器结束之前无法再次触发。一般用于可预知的用户行为的优化，比如为scroll事件的回调函数添加定时器。

在间隔一段时间执行一次回调的场景有：

1.滚动加载，加载更多或滚到底部监听


2.搜索框，搜索联想功能

简单来说就是，一段时间内重复触发，按一定频率(1s、3s、5s)执行，可配置一开始就执行一次。

如果还不懂，就直接上我们的例子。我们可以看到当我们滑动屏幕的时候，会频繁运行打印这个函数。

当我们进行节流后，给它设置一个时间，那么他就只会在该时间后

上代码

其中fn代表将要运行的函数，delay代表函数触发的时间间隔。

整个代码思路，
timer=null，
flag=false, 默认刚开始不运行
设置一个定时器，
等到delay时间到了，就会开始运行这个函数fn。如果在delay之前，发生了滚动等事件，因为已经
flag = true，只会return 不会运行这个函数fn。只有等带delay到了时间，才会运行函数。

定时器实现的节流函数在第一次触发时不会执行，而是在 delay 秒之后才执行，当最后一次停止触发后，还会再执行一次函数。

js
let count = 0;
function throttle(fn, delay) {
let timer = null // 把变量放函数里面，避免全局污染
let flag = false
let that = this
return function () {
if (flag) return

                flag = true
let arg = arguments // 此处为fn函数的参数

                timer = setTimeout(() => {

                    fn.apply(that, arg)

                    flag = false

                }, delay)

            }

        }
function test(a, b) {
console.log(a, b)

        }
let throttleTest = throttle(test, 1000)
// 测试函数
function test1() {
console.log('普通test:', count++)

        }

window.addEventListener('scroll', (e) => {
// test1() // 不用节流的话，页面滚动一直在调用
throttleTest(1, 2) // 加上节流，即使页面一直滚动，也只会每隔一秒执行一次test函数

        })