1. 防抖
JS的抖动, 指的是, 用户在某种状态下, 会 持续触发 某个事件. 比如滑动滚动条的时候, 会一直触发oncroll事件.
所以我们需要让客户在都抖动停止后, 才执行某些代码, 这就是防抖.
常见需要做防抖的事件类型有: oncroll / onmouseenter / onmousemuve, 等.
ex: 以oncroll事件为例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>防抖</title>
<style>
.div {
height: 2000px;
}
</style>
</head>
<body>
<div class="div"></div>
<script>
// 进一步封装 防抖
// 传入2个形参: 时间 和 回调函数
function fangdou (time, callback) {
var timer // 这个timer必须为全局变量
return function () {
clearTimeout(timer)
timer = setTimeout(() => {
callback()
}, time)
}
}
window.onscroll = fangdou(500, () => {
console.log('onscroll')
})
</script>
</body>
</html>
2. 节流
节流, 指的是, 因为有些场景需要在用户的某种状态中, 持续获得某种事件的结果, 但是又不能一直不断地让用户触发这个事件, 最好是 隔一段时间就触发一次 , 这就是节流的思想.
ex: 以下还是以oncroll事件为例. 用户在上拉和下拉滚动条的时候, 会一直触发oncroll事件, 但是我们每隔1000ms获得一次oncroll事件的结果.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>节流</title>
<style>
body {
height: 2000px;
}
</style>
</head>
<body>
<script>
// 封装 节流
// function jieliu () {
// var beginTime = Date.now()
// var timer
// return function () {
// clearTimeout(timer)
// var space = Date.now() - beginTime
// if (space >= 1000) {
// console.log('onscroll')
// beginTime = Date.now()
// } else {
// timer = setTimeout(() => {
// console.log('onscroll, end')
// }, 1000)
// }
// }
// }
// 进一步 封装 节流
function jieliu (time, callback) {
var beginTime = Date.now()
var timer
return function () {
clearTimeout(timer)
var space = Date.now() - beginTime
if (space >= time) {
callback()
beginTime = Date.now()
} else {
timer = setTimeout(() => {
callback()
}, time)
}
}
}
window.onscroll = jieliu(1000, () => {
console.log('onscroll')
})
// window.onscroll = function () {
// console.log('onscroll')
// }
</script>
</body>
</html>
