1、防抖
针对于用户操作数据过于频繁 只要最后一次时间的操作,例如input输入框执行函数
<!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>
<input type="text" />
</body>
</html>
<script>
let app = document.querySelector('input')
app.oninput = function() {
console.log(this.value)
}
</script>
输出结果:
每按一次执行一次function 现在采用防抖
let app = document.querySelector('input')
let t = null
app.oninput = function() {
if(t) {
clearTimeout(t)
}
t = setTimeout(() => {
console.log(this.value)
},500)
}
输出结果
只要两次操作之间的时间不超过500毫秒,他就不会执行console.log(this.value)
思路:用户输入
→触发app.oninput对应的function
→判断t是否为null,第一次t是为null的,执行t = setTimeout(() => {console.log(this.value)},500)
→若是500毫秒之内再次操作input执行,这时t不是为空的,所以执行clearTimeout(t),setTimeout 500毫秒没到,相当于没执行就被清除了,所以不会打印
→以此类推。。。
防抖的闭包实现代码:
let app = document.querySelector('input')
app.oninput = debounce(function(){
console.log(this.value) //如果直接执行fn而不是fn.call(this),那么这个this指向的是window对象
},500)
function debounce(fn,delay){
let t = null
return function(){
if(t){
clearTimeout(t)
}
t = setTimeout(() => {
console.log(this,'这个this是什么') // <input type="text" />
fn.call(this) // 将this指向window改成input
},delay)
}
}
2、节流
节流的作用:控制高频事件执行次数 如滚动事件
<!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>
</body>
</html>
<script>
window.onscroll = function(){
console.log(123)
}
</script>
<style>
body {
height: 2000px;
}
</style>
输出结果:
稍微滚动了一下滚轮 就打印了这么多 要是这执行的是一些高消耗请求 浏览器就可能直接暴毙卡死了
现在采用节流
let flag = true
window.onscroll = function(){
if(flag){
setTimeout(function(){
console.log(123)
flag = true
},1000)
}
flag = false
}
1000毫秒内操作执行最多一次
节流的闭包实现代码 和防抖的几乎一模一样
window.onscroll = throttle(function(){
console.log(123)
},1000)
function throttle(fn,delay) {
let flag = true
return function(){
if(flag){
setTimeout(function(){
fn.call(this)
flag = true
},1000)
}
flag = false
}
}