节流和防抖
防抖(debounce)
防抖的含义就是让某个时间期限（如1000毫秒）内，短时间内连续触发的事件，但事件处理函数只执行一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn" style="height: 30px; width: 100px; background-color:red;"></button>
<script>
function debounce(fn, delay) {
//记录上次的延时器
let timer = null
return function() {
//清除上次的延时器
clearTimeout(timer)
timer = setTimeout(
function() {
fn.apply(this)
}, delay)
}
}
document.getElementById('btn').onclick = debounce(
function() {
console.log('点击按钮事件触发，at Date', Date.now());
}, 1000)
</script>
</body>
</html>
节流(throttle)
如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn" style="height: 30px; width: 100px; background-color:red;"></button>
<script>
function throttle(fn, delay) {
//记录上次的延时器
let lastTime = 0
return function() {
let nowTime = Date.now()
if (nowTime - lastTime > delay) {
fn.apply(this)
lastTime = nowTime
}
}
}
document.getElementById('btn').onclick = throttle(
function() {
console.log('点击按钮事件触发，at Date', Date.now());
}, 2000)
</script>
</body>
</html>
