<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
防抖<input type="text" id="input" value="">
节流<input type="text" id="inp" value="">
</div>
</body>
<script>
// 只会执行最后一次
let obj = document.getElementById('input')
let times = 0
obj.addEventListener('keyup', function() {
clearTimeout(times)
times = setTimeout(() =>{
console.log('执行防抖' + obj.value)
}, 1000)
})
// 每一段时间都会执行一次
let inp = document.getElementById('inp')
let flag = true
inp.addEventListener('keyup', function() {
if(!flag) {
return
} else if(flag) {
flag = false
setTimeout(() => {
flag = true
console.log('执行节流' + inp.value)
}, 1000)
}
})
</script>
</html>
防抖 :
防抖一般用于禁止多次发送请求的情况下使用, 避免浪费资源
一段时间只想执行最后一次用防抖
节流 :
节流只要触发了就会在一定时间内匀速执行, 一般运用于窗口下来图片懒加载
一段时间内想持续匀速执行用节流