Front-end-learning-to-organize-notes
Front-end-learning-to-organize-notes copied to clipboard
Published
20 hours ago •
Chocolate1999
Chocolate1999
【挑战系列2】写出你的防抖和节流代码
防抖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>防抖</title>
<style>
.box {
width: 300px;
height: 200px;
background-color: #38b99b;
font-size: 30px;
line-height: 200px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var oBox = document.getElementsByClassName('box')[0]
// let cnt = 0
// var timeout = null
// oBox.onmouseover = function(){
// // oBox.innerHTL = ++cnt
// clearTimeout(timeout)
// timeout = setTimeout(()=>{
// oBox.innerHTML = ++cnt
// },2000)
// }
let cnt = 0
let addSomething = () => {
oBox.innerHTML = ++cnt
}
let debounce = (fn, time, triggerNow) => {
let timeout = null
let debounced = (...args) => {
if (timeout) {
clearTimeout(timeout)
}
if (triggerNow) {
let exec = !timeout
timeout = setTimeout(() => {
timeout = null
}, time)
if (exec) {
fn.apply(this, args)
}
} else {
timeout = setTimeout(() => {
fn.apply(this, args)
}, time)
}
}
debounced.remove = () => {
clearTimeout(timeout)
timeout = null
}
return debounced
}
oBox.onmouseover = debounce(addSomething, 2000, false)
</script>
</body>
</html>
节流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>节流</title>
<style>
.box {
width: 300px;
height: 200px;
background-color: #38b99b;
font-size: 30px;
line-height: 200px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var oBox = document.getElementsByClassName('box')[0]
let cnt = 0
let addSomething = () => {
oBox.innerHTML = ++cnt
}
let throttle = (fn,time) => {
let flag = true
let timeout = null
let throttled = (...args) => {
if(!flag) return
flag = false
clearTimeout(timeout)
timeout = setTimeout(()=>{
fn.apply(this,args)
flag = true
},time)
}
return throttled
}
oBox.onmouseover = throttle(addSomething, 2000)
</script>
</body>
</html>
防抖：短时间内大量触发同一事件，只会执行一次函数
function debounce(fn, delay) {
let timer = null
return function () {
if(!timer) return
timer = setTimeout(fn, delay)
}
}
节流：短时间内大量触发同一事件，那么函数执行后，函数在指定时间内不会再触发，等过了该时间才会重新生效。
function throttle(fn, delay) {
let flag = true
return function() {
if(!flag) return
flag = false
setTimout(function() {
fn()
flag = true
}, delay)
}
}
