一个demo帮助快速理解实践 js防抖与节流的原理以及实际意义

最新推荐文章于 2024-09-19 15:53:35 发布

噎

最新推荐文章于 2024-09-19 15:53:35 发布

阅读量359

点赞数

分类专栏： js 文章标签： js 面试

本文链接：https://blog.csdn.net/weixin_44248722/article/details/109882773

版权

本文通过实例演示，详细解释了JavaScript中防抖与节流的概念。防抖技术用于限制事件处理函数的执行次数，确保在一段时间内只执行最后一次触发的事件。节流则是在设定的时间间隔内，只执行一次函数，常用于优化性能，例如搜索联想、滚动监听等场景。文章还提供了防抖和节流的核心代码示例。

摘要由CSDN通过智能技术生成

本文旨在通过实际应用的小例子，帮助读者快速理解防抖与节流的意义与原理

防抖与节流解释

这是我个人对防抖和节流的理解，如果觉得解释有误的，欢迎指出，相互学习~

防抖：

使高频事件需要时间n才能进行一次，在时间n内多次触发的时，按最后一次触发重新计算时间，即最后一次触发事件后经过时间n事件才会进行。

节流：

同样的，是使高频事件需要时间n才能进行一次，但是不同的是节流是按第一次触发计算时间，即触发第一次事件后的时间n内，多次触发事件均均会被忽略，直到时间n后事件进行了，才能接收下一次事件触发。

demo

直接上demo演示防抖与节流

在这里插入图片描述
解释一下：

最上面是一个输入框和发送按钮；
第一个防抖的box1会显示输入框输入的内容，显示规则如图所示，当输入框在2秒内不断输入时，box1不会更新，当停止输入2秒时，box1就会更新输入框的内容；
第二个节流的box2会显示点击发送后输入框的内容，规则同样如图所示，当第一次点击发送按钮后2秒内多次点击均不会生效，2秒后发送出消息才能进行下一次点发送；

演示

话不多说直接演示

输入一个字符
输入一个字符后不做任何动作，输入停止2秒后box1更新，console显示输入时间加上给定的2秒，即符合花费时间
继续连续输入多个字符
2秒内一直不断输入时，box1不更新，console可见每次输入时间间隔少于2秒

可见，最后一次输入停止2秒后，box1更新，花费时间符合第一次输入到最后一次输入的时间差加上2秒
点击一次发送
如图可见，消息正常在2秒后发送
继续连续点击多次发送
可见，从第一次点击发送的的2秒后，发送成功，符合花费时间为2秒，在期间多次点击均被忽视，2秒后再次点击才能进行发送

防抖与节流的意义

其实就如上面的例子所示，假如这是一个搜索框，当用户输入内容时，会根据输入框内容自动联想用户可能要搜索的词条，假如每次输入框的内容一变动就触发联想（可能会有打错、修改等情况），那么就会浪费很多不必要的性能且使页面卡顿，这时就需要用到防抖了，因为我们只需要根据用户短时间内最后输入的内容进行联想，从而减少不必要的性能消耗，更多的还有比如监听页面滚动、监听页面resize事件适配等。而点击发送也很好理解，假如每次点击发送都会向请求数据，节流就是限时发送请求的频率，避免短时间用户短时间多次点击发送请求造成性能浪费或卡死等情况。

demo代码

最后附上demo的代码

html,css部分

<head>
<style>
        .box {
    
            height: 100px;
            width: 100%;
            border: 1px solid blue;
            overflow: hidden;
        }
</style>
</head>
<body>
<input type="text" id="write"> <button id="sendbtn">发送</button>
<h1>防抖</h1>
<h2>停止输入2s后才会更新显示，2s内一直输入则不更新</h2>
<div id="show" class<