1.理解
节流就是规定在一个单位时间内,只能触发一次函数,如果这个单位时间内触发多次函数,只有一次生效,节流会稀释函数执行的次数,(大多数用户按钮的点击事件,在一定时间内无论点击多少次都只执行一次)
从游戏角度来说,节流就像是技能CD,如果这次使用了,在规定的时间内,你再点击它,他也不会释放技能
2. 手写节流函数
function throttle(fn,delay){
// 设置一个变量来控制 定时器中的函数的执行与否
let canRun = true
return function (){
// 判断 变量的值,来决定是否返回
if (!canRun) return
// 给变量重新赋值为false
canRun = false
setTimeout(() => {
// 绑定this
fn.call(this)
// 重新将变量设置为true
canRun = true
}, delay);
}
}
3. 实际应用
输入框内的值发生变化时,在规定的时间内只会执行一次fun函数,如果在规定的时间之内,输入框内的值有了新的变换,并不会触发函数的执行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>节流</title>
</head>
<body>
<h2>节流尝试</h2>
<input type="text" id="input">
<script>
let inputValue = document.getElementById('input')
inputValue.addEventListener('keyup', throttle(fun, 1000))
function throttle(fn,delay){
let canRun = true
return function (){
if (!canRun) return
canRun = false
setTimeout(() => {
fn.call(this)
canRun = true
}, delay);
}
}
function fun(){
console.log(this.value)
}
</script>
</body>
</html>