本文介绍了防抖和节流两种技术，旨在减少事件处理程序的执行频率，从而提高应用程序性能。通过具体实例展示了这两种技术的实现方法及其应用场景。
**防抖与节流是什么？如何实现？**
目录
♡ ‧₊˚ 定义 ‧₊˚ ♡
防抖（debounce）：当我们持续触发一个事件时，事件处理程序不会执行，只有当我们在设置的时间间隔里没有触发事件时，事件处理程序才会执行，若在这个时间间隔里被重复触发则重新开始计算。
节流（throttle）：无论事件触发得多么频繁，在规定的时间间隔内只执行一次事件处理程序。
目的：都是为了降低回调执行频率。节省计算资源
♡ ‧₊˚ 实现 ‧₊˚ ♡
防抖
代码实现如下：
-
<body>
-
<input type="text" id="shuru">
-
<button onclick="btnClick()">此处防抖
</button>
-
<script>
-
// 防抖
-
// 获取事件
-
var shuru =
document.
getElementById(
'shuru')
-
// 创建一个定时器
-
var timeID =
null
-
// 绑定事件
-
shuru.
oninput =
function(
){
-
// 每当用户点击/输入时就将前一个定时器删除
-
clearTimeout(timeID)
-
// 然后创建一个新的定时器
-
// 如果用户在这个时间间隔内在此操作的话
-
// 函数将不会被执行
-
timeID =
setTimeout(
() => {
-
console.
log(
`你输入的值是${this.value}`);
-
},
1000)
-
}
-
// 执行后我们发现：当我们在输入框持续输入内容时控制台
-
// 不会打印东西，当我们在设置的时间间隔一秒内没有进行输入操作的话
-
// 控制台会将我们输入的值打印出来
-
</script>
-
</body>
若不加入防抖，则我们每次在输入框里输入一个字符，控制台都会打印依次“你输入的值是…” ，而加入了防抖之后，若我每次在输入框中输入三个字符便停顿一次，那么在我们设置的这个时间间隔一秒之后，这个函数才会被执行一次，相应的语句被打印一次。
节流
代码实现如下：
-
<body>
-
<input type="text" id="shuru">
-
<button onclick="btnClick()">此处节流
</button>
-
<script>
-
var lastTime =
null
-
function
btnClick(
){
-
// 获取当前时间
-
var currentTime =
Date.
now()
-
// 从上一次到现在，还剩下多少多余时间
-
if(currentTime - lastTime >=
3000){
-
console.
log(
'被点击了');
-
// 将当前时间赋值给lastTime继续记录时间间隔
-
lastTime = currentTime
-
}
-
}
-
</script>
-
</body>
无论我们点击得多么频繁，语句也只会三秒再打印一次。
♡ ‧₊˚ 应用 ‧₊˚ ♡
防抖在连续的事件，只需触发一次回调的场景有：
- 搜索框搜索输入。只需用户最后一次输入完，再发送请求
- 手机号、邮箱验证输入检测
- 窗口大小
resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。
节流在间隔一段时间执行一次回调的场景有：
- 滚动加载，加载更多或滚到底部监听
- 搜索框，搜索联想功能
目录
♡ ‧₊˚ 定义 ‧₊˚ ♡
防抖（debounce）：当我们持续触发一个事件时，事件处理程序不会执行，只有当我们在设置的时间间隔里没有触发事件时，事件处理程序才会执行，若在这个时间间隔里被重复触发则重新开始计算。
节流（throttle）：无论事件触发得多么频繁，在规定的时间间隔内只执行一次事件处理程序。
目的：都是为了降低回调执行频率。节省计算资源
♡ ‧₊˚ 实现 ‧₊˚ ♡
防抖
代码实现如下：
-
<body>
-
<input type="text" id="shuru">
-
<button onclick="btnClick()">此处防抖
</button>
-
<script>
-
// 防抖
-
// 获取事件
-
var shuru =
document.
getElementById(
'shuru')
-
// 创建一个定时器
-
var timeID =
null
-
// 绑定事件
-
shuru.
oninput =
function(
){
-
// 每当用户点击/输入时就将前一个定时器删除
-
clearTimeout(timeID)
-
// 然后创建一个新的定时器
-
// 如果用户在这个时间间隔内在此操作的话
-
// 函数将不会被执行
-
timeID =
setTimeout(
() => {
-
console.
log(
`你输入的值是${this.value}`);
-
},
1000)
-
}
-
// 执行后我们发现：当我们在输入框持续输入内容时控制台
-
// 不会打印东西，当我们在设置的时间间隔一秒内没有进行输入操作的话
-
// 控制台会将我们输入的值打印出来
-
</script>
-
</body>
若不加入防抖，则我们每次在输入框里输入一个字符，控制台都会打印依次“你输入的值是…” ，而加入了防抖之后，若我每次在输入框中输入三个字符便停顿一次，那么在我们设置的这个时间间隔一秒之后，这个函数才会被执行一次，相应的语句被打印一次。
节流
代码实现如下：
-
<body>
-
<input type="text" id="shuru">
-
<button onclick="btnClick()">此处节流
</button>
-
<script>
-
var lastTime =
null
-
function
btnClick(
){
-
// 获取当前时间
-
var currentTime =
Date.
now()
-
// 从上一次到现在，还剩下多少多余时间
-
if(currentTime - lastTime >=
3000){
-
console.
log(
'被点击了');
-
// 将当前时间赋值给lastTime继续记录时间间隔
-
lastTime = currentTime
-
}
-
}
-
</script>
-
</body>
无论我们点击得多么频繁，语句也只会三秒再打印一次。
♡ ‧₊˚ 应用 ‧₊˚ ♡
防抖在连续的事件，只需触发一次回调的场景有：
- 搜索框搜索输入。只需用户最后一次输入完，再发送请求
- 手机号、邮箱验证输入检测
- 窗口大小
resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。
节流在间隔一段时间执行一次回调的场景有：
- 滚动加载，加载更多或滚到底部监听
- 搜索框，搜索联想功能
扫一扫
736
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
