js的抖动
在 js 中 改变窗口大小 & 上下滚动滚动条 & 反复向输入框中输入内容 ... , 如果绑定了相应的事件 , 这些事件的触发频率非常高, 严重影响用户体验和服务器的性能 , 这种问题 在js中 就叫 js 的抖动 .
解决方法 : 防抖 & 节流
js的防抖
就是在在持续触发的过程中不会执行对应的函数 , 当触发停止一段时间后再执行对应的函数
具体就是在触发事件中设置一个定时器来延迟对应函数的生效 ,只有当两次触发事件的间隔时间能够触发定时器才会使对应函数生效
<
style>
.
mybox {
width:
600px;
height:
1500px;
background-color: pink;
margin:
0 auto;
}
</
style>
</
head>
<
body>
<
div
class="
mybox"></
div>
</
body>
<
script>
var
timer;
window.
onscroll =
function () {
if (
timer) {
clearTimeout(
timer)
}
timer =
setTimeout(()
=> {
console.
log('
我滚啦')
},
1000)
}
</
script>
js的节流
当持续触发事件时 ，每隔固定的时间也要调用一次函数
就是给对应函数设置一个触发的条件 , 每次触发记录下当前的时间戳
当两次获取的时间戳的差值满足条件时将执行对应的函数 , 并且将当前的时间记为初次获取的时间戳
<
style>
.
mybox {
width:
600px;
height:
1500px;
background-color: pink;
margin:
0 auto;
}
</
style>
</
head>
<
body>
<
div
class="
mybox"></
div>
</
body>
<
script>
function
fn() {
//执行函数
console.
log('
我滚啦')
}
function
throttle(
wait,
func) {
var
beginTime =
Date.
now()
return
function () {
var
currentTime =
Date.
now()
var
space =
currentTime -
beginTime
if (
space >=
wait) {
func()
beginTime =
Date.
now()
}
}
}
window.
onscroll =
throttle(
1000,
fn)
</
script>