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的节流
当触发事件时 , 每隔固定时间 执行一次函数
步骤 :
1.进入触发函数中先 获取 一次当前时间 beginTime
2.返回一个匿名函数
a.在获取一次当前时间 currentTime
b.得到两次获取时间的差值 cpace
c.将space 与间隔时间进行比较 , 如果不小于间隔时间就调用执行函数 , 并且此时获取当前时间赋值给 beginTime
<
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 () {