title: 防抖节流
防抖节流线上视频链接,B站 https://www.bilibili.com/video/BV1TE411q7m4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
body,
html {
width: 100%;
height: 5000px;
}
#div {
position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: red;
}
</style>
<body>
</body>
<script>
let div = document.querySelector("#div")
function throttle(fn, duration = 1000) { // 节流
let timer = 0
return function (...args) {
let _self = this
if (timer) {
return
}
fn.apply(_self, args)
timer = setTimeout(() => {
clearTimeout(timer)
timer = 0
}, duration)
}
}
function debounce(fn, duration = 1000) { // 防抖
let timer = 0
return function (...arge) {
let _self = this
clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(_self, arge)
}, duration)
}
}
function Div() {
console.log(window.scrollY)
}
document.addEventListener("scroll", throttle(Div, 2000)) // 节流
document.addEventListener("scroll", debounce(Div, 2000)) // 防抖
</script>
</html>