防抖与节流"/>
彻底搞懂JavaScript防抖与节流
今天为大家带来一篇JS重难点的知识体系，这也是前端高薪必备的重难点知识，而且防抖与节流在各大企业前端面试过程中经常会考到的高频面试题！
为了更好的帮助大家理解防抖与节流，我们特意从我们的系统班（星辰班）中节选了两节课详细的讲解！放在钉钉群直播回放里面，大家可以看完这个文章之后，可以通过最底部的微信二维码添加助理老师，加入三十天计划群里学习！（如果你已经添加了助理老师，那还等什么，赶紧去问问老师，加入交流群学习吧！）
有同学反馈：
看了那么多面试题和答案，还不如老师一节课讲的通透，听了不过瘾还想继续听 ^_^
一、为什么需要防抖与节流
我们要了解什么是防抖与节流？这就需要回归到现实的应用场景来谈。
如果我们要监听浏览器滚动事件，或监听输入框值变化查询搜索结果等等，这些场景有个共同特点，频繁执行，然而我们不需要太频繁执行，比如滚动事件，间隔几百毫秒或者一秒执行回调就能满足业务需求，所以才有了节流和防抖的概念，目的是减少事件回调执行，提高浏览器性能。
接下来我们通过一个常见的防抖案例：搜索查询来展开讲解，帮助大家理解防抖。然后我们再通过一个常见的节流案例：滚动加载更多来展开讲解，帮助大家理解节流。
二、防抖案例：搜索查询
比如我们在一个表单中输入内容，JS通过监听输入框值的变化来查询搜索结果，我们会通过keyup事件来处理，当键盘弹起时就会触发keyup事件，在事件处理函数中发送请求处理查询结果。在我们输入内容时，会频繁的触发keyup事件，然而我们并不希望太频繁触发keyup事件处理函数发送请求查询。我们希望当我们抬起键盘间隔几百毫秒后再触发keyup事件处理函数发送请求查询（如果在间隔时间内再次触发keyup事件，就会把上一次的定时器清除，重新再计时）。因为频繁的触发增加了浏览器的性能消耗，同时也增加了对服务器的请求次数，增加服务器的压力。具体代码实现如下：
当我们以正常的速度在输入框中输入内容时，两种效果的前后对比
未添加防抖前的效效果
<body>
搜索查询：<input type="text" id="search" />
<script>
const search = document.getElementById("search");
var i = 0;
search.onkeyup =
更多推荐
彻底搞懂JavaScript防抖与节流
发布评论