js的抖动及防抖和节流
程序员文章站
2022-10-04 14:52:34
js的抖动 在 js 中 改变窗口大小 & 上下滚动滚动条 & 反复向输入框中输入内容 ... , 如果绑定了相应的事件 , 这些事件的触发频率非常高, 严重影响用户体验和服务器的性能 , 这种问题 在js中 就叫 js 的抖动 . 解决方法 : 防抖 & 节流 js的防抖 就是在 触发事件 中设置 ......
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 () {
var currenttime = date.now()
var space = currenttime - begintime
if (space >= wait) {
func()
begintime = date.now()
}
}
}
window.onscroll = throttle(1000, fn)
</script>
上一篇： java基础第十四篇之Map