js的抖动及防抖和节流
Posted lc-meng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于js的抖动及防抖和节流的主要内容，如果未能解决你的问题，请参考以下文章