什么是防抖,什么是节流
防抖:
含义:用户触发事件过于频繁,只要最后一次事件的操作
<script>
let inp = document.querySelector("input")
let t
inp.oninput = function(){
if(t){
clearTimeout(t)
}
t = setTimeout(()=>{
console.log(this.value)
},500)
}
</script>
封装函数后:
<script>
let inp = document.querySelector("input")
inp.oninput = debunce(function(){
console.log(this.value)
}, 500)
function debunce(fn, delay){
let t = null
return function(){
if(t !== null){
clearTimeout(t)
}
t = setTimeout(()=>{
fn.call(this) // 修改fn() 中this的指向
},delay)
}
}
</script>
节流:
含义:控制高频事件的执行次数
<style>
body{
height: 2000px;
}
</style>
<script>
var flag = true
window.onscroll = function(){
if(flag){
setTimeout(()=>{
console.log("Hello World")
flag = true
},500)
}
flag = false
}
</script>
封装函数:
<script>
window.onscroll = throttle(function(){
console.log('Hello World')
}, 500)
function throttle(fn, delay){
let flag = true
return function (){
if(flag){
setTimeout(()=>{
fn.call(this)
flag = true
},delay)
}
flag = false
}
}
<script/>
结论对比:
防抖:高频触发,只获取最后一次触发
节流:高频触发,控制执行的次数