今天简单聊聊JavaScript的函数防抖和节流，因为今天遇到别人问我这个问题，函数的防抖和节流有啥区别，应用场景又是什么？
那接着我们就带着这两个问题来讨论一下吧。不过网上应该也有很多资料。单纯跟大家互相讨论下，说的不对的地方，感谢指出，便于改进。
函数防抖 debounce
原理：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间（这个是摘抄过来的，用我的话来说，就是在n秒内不停触发这个函数，只会执行最后一次）
那原理聊完了，我们就上代码吧，简单直接点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 函数防抖</title>
</head>
<body>
<input type="text" name="" id="inp" value="" /><br>
</body>
<script>
(function(){
if(false) return;
console.log(1122)
})()
// 函数防抖 两个参数，一个防抖的函数，一个是time时间毫秒，多少秒内触发这个会进行防抖处理
function debounce(fn,time) {
var timer = null;
return function() {
clearTimeout(timer)
timer = setTimeout(()=>{
fn.apply(this,arguments)
},time)
}
}
function sayHi() {
console.log(this.value)
console.log('防抖处理')
}
var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi,1000)); // 防抖
</script>
</html>
不了解的，可以直接复制到出来运行下，那说完原理，复制完代码，就说说应用场景吧，这东西应该就面试官喜欢问，实际工作看情况
函数防抖应用场景：通过input实时搜索，用户注册时候的手机号码验证和邮箱验证，还有页面滚动回调等等这些场景都挺适用，一切从实际出发，不要让自己思维限死了，根据实际场景运用，主要明白这个东西原理用来干嘛的
函数节流 throttle
原理： 高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率（摘抄的，用我的话说，就是n秒内不停触发这个函数，只执行一次）说的有问题的话，请指出改进
上代码吧，不多说
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数节流</title>
<style>
.p1{
height: 5000px;
}
</style>
</head>
<body>
<button type="button" id="btn">获取button的信息触发节流</button>
<p class="p1">信息</p>
</body>
<script>
// 函数节流
function throttle(fn,time) {
var canRun = true;
return function() {
if(!canRun) return;
canRun = false
setTimeout(()=>{
fn.apply(this,arguments)
canRun = true
},time)
}
}
function getButtonSize(e) {
console.log('getButtonSize',e.target)
}
var btn = document.getElementById("btn")
btn.addEventListener('click',throttle(getButtonSize,1000))
// 网页滚动监听
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置：' + scrollTop);
}
window.onscroll = throttle(showTop,500)
</script>
</html>
函数节流应用场景： 上面有两个，一个是按钮多次触发获取按钮信息，一个是监听网页滚动位置，实时监听太过耗费性能所以可以通过节流处理，还有比如点击支付等等，根据实际场景运用，主要还是明白这个东西用来干嘛的
大家如果有问题的话可以留言，也可以跟我这个小菜鸟交流。为啥要写这么简单的东西，因为最近不用996，闲得慌吧。本来想继续写vue3的，但是不知道怎么写下去，感觉看着vue官方文档也可以使用，vue3源码又没研究。
浙公网安备 33010602011771号