目录
前言
不管是在工作中还是面试中我们都会遇见这个词语:防抖节流,那么今天我们就讲一讲防抖节流到底有什么作用,应用在什么场景、如何实现和原理~
感兴趣就继续往下看看把
一、防抖?
1.防抖
无论在n秒内触发了多少次事件,只执行最后一次
2.防抖功能及应用场景
根据防抖的定义,我们都知道用于需要完成一个动作后一段时间再执行,比如:
· 1.使用echarts图表,改变网页大小的时候
2.阻止按钮在一定时间内被重复调用,如发送短信后的倒计时
3.自动保存功能实现
4.常用的搜索联想
3.原理
上面已经说了防抖的原理就是利用setTimeout和闭包来实现的延迟执行,下面我们一起来看看把~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>防抖</title>
</head>
<body>
<input type="text">
<script>
//获取input元素
const inputText = document.getElementsByTagName('input')[0]
function antiShake(delay,callBack){
let timer;
return function (value) {
clearTimeout(timer),//清除计时器
timer = setTimeout(function () {
callBack(value)//执行行为
},delay)
}
}
//定义要执行什么行为
function message(value) {
console.log(value)
}
//定义闭包返回的这个函数
const hightFun = antiShake(1000,message);
//监听input事件,并执行行为
inputText.addEventListener('input',function (e) {
hightFun(e.target.value)
})
</script>
</body>
</html>
很明显,就是监听input事件,然后调用一个闭包函数,这个函数用setTimout延迟执行,如果在这期间再次触发input事件,那么清空定时器,重新开始计时~
二、节流?
1.节流
在n秒内,无论触发了多少次事件,只执行一次(第一次)
2.防抖功能及应用场景
1.滚动条下拉,每隔一段时间计算一次
2.播放计事件
3.原理
节流和防抖差不多,节流也用到了setTimeout,但是呢,节流会判断是否在这个时间内,如何判断呢,就是判断这个定时器是否还存在,不存在才执行事件,并且执行完后要初始化timer为null
代码如下~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节流</title>
</head>
<body>
<button id="submit">提交</button>
<script>
//获取input元素
const submitBtn = document.getElementById('submit')
function throttle(delay,callBack){
let timer;
return function () {
//没有timer的时候才执行
if(!timer){
timer = setTimeout(function () {
callBack()//执行行为
timer =null //执行完后赋值为null
},delay)
}
}
}
//定义要执行什么行为
function message(value) {
console.log("你好")
}
//监听点击事件,并执行行为
submitBtn.onclick =throttle(2000,message)
</script>
</body>
</html>
总结
以上就是今天要讲的内容,本文仅仅简单防抖和节流并且讲解了原理,希望对大家有用把~