13.防抖-节流

阅读数: 次 2022-10-30

字数统计: 714字 | 阅读时长: 2分

防抖

防抖的了解和基本使用

当我们在输入框中输入内容的时候，例如百度搜索和淘宝搜索的时候，下面会出现很多联想的内容，比如我们输入一个书，下面会出现如下图所示内容。

当我们频繁的去输入内容的时候，甚至是我在输入书的拼音s -> sh -> she的时候，他都会产生对应的联想内容，但是那些并不是我们想要去搜索的内容，这也就产生了很多不必要的网络请求。

假设我们可以在输入我们想要的内容之前不去发送网络请求，或者是说尽量少发送几次网络请求。

防抖就是让我们在输入 s和h之间的间隔事件比较短，就不去发送s所对应联想的内容，当我们输入框在一定时间内有内容改变的时候不去发送网络请求，在一定的的时间内内容没有改变，然后在去发送网络请求。

我的理解就是，在输入内容之后等待一定时间去发送网络请求，如果在此期间内输入框中的内容有改变，则重置时间，重新计算需要去发送发网络请求的时间。直到达到设定的等待时间，则去执行我们对应的操作或是发送网络请求。

<body>
    <input type="text" class="input">

    <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.6/underscore-umd-min.js"></script>
    <script>

        const input = document.querySelector('.input')

        let i = 1
        input.oninput = _.debounce(() => {
            console.log(`发送第${i++}次网络请求`)
        }, 500)
    </script>
</body>

coderwhy的ppt中的解释：

当事件触发的时候，响应的函数不会立即执行，而是会等待一定的时间
当时间密集触发的时候，函数的触发会被频繁的推迟
只有等待了一段时间也没有时间触发，才会真正的执行响应函数。

应用场景

输入框频繁输入内容，搜索，提交信息
频繁的点击某个按钮，触发某个事件
监听浏览器滚动事件，完成某些特定的操作
用户缩放浏览器的resize事件

节流throttle

当事件触发时，在一定时间内无论事件被触发都多少次，事件响应函数会执行一次。

也就是说事件响应函数时按照固定的频率来指定的，而不是由事件触发的次数或时间来决定的。

应用场景

监听页面的滚动事件
鼠标移动事件
用户频繁点击按钮操作
游戏中的一些设计