JavaScript系列——防抖&节流

本文链接：https://blog.csdn.net/pfourfire/article/details/125042051

防抖和节流是防止高频率触发的事件

防抖，一般用在使用

onresize事件（onresize：当浏览器被重置大小时执行Javascript代码） 、

oninput事件：在用户输入时触发。

如果事件进行高频率触发，很可能会导致服务器崩溃

那么就可以使用函数防抖进行优化，比如你乘坐电梯，如果十秒钟之内有人进入或者出去，那么十秒钟就会重新开始计时，直到十秒之内都不在有人流动才会关门

那么节流就不一样了：同样是电梯十秒运作，电梯的机制是当人进入电梯后，十秒钟内自动关门，这十秒钟内人可以进出，当到了十秒钟后，不管你有没有人进入出去都直接关门，准时运作。

函数节流简单理解

每隔一段时间执行一次

函数防抖简单理解

每当事件触发一次，就会重置定时器，一直到最后一次触发事件，再去执行

防抖一般用于触发input事件

例如：

<body>
    请输入信息：<input type="text">
    <script>
        var input =document.querySelector('input');
        input.oninput = function(){
            console.log('事件被触发');
        }
    </script>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2BZvajTI-1653877669884)(https://juejin.cn/ “点击并拖拽以移动”)]

效果如下：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iui6VMnI-1653877669885)(https://juejin.cn/ “点击并拖拽以移动”)]

我们在输入文字时，每次输入都会发送请求，这样中间的很多东西没有必要给后端，给了的话对服务器的压力非常大，那么在这里可以使用函数防抖来进行优化

<!DOCTYPE html>