防抖:动作绑定事件,动作发生后一定时间后触发事件,在这段时间内,如果该动作又发生,则重新等待一定时间再触发事件。
例如用户频繁点击,只需要响应一次即可
节流: 动作绑定事件,动作发生后一段时间后触发事件,在这段时间内,如果动作又发生,则无视该动作,直到事件执行完后,才能重新触发。
例如监听窗口resize和scroll事件
<!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>
<body>
<div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>
<script>
// 防抖 计时器
function debounce (fn, delay = 500) {
let timer = null;
return () => {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
}
}
// 节流 计时器
function throtte1(fn, delay = 500) {
let timer = null;
return () => {
if(timer) return;
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay)
}
}
// 节流 开关
function throtte2(fn, delay = 500) {
let isOk = true;
return () => {
if(!isOk) return;
isOk = false;
setTimeout(() => {
fn.apply(this, arguments);
isOk = true;
}, delay)
}
}
// 节流 时间差值判断
function throtte3 (fn, delay = 500) {
let pre = Date.now();
return () => {
let cur = Date.now();
if(cur - pre > delay){
setTimeout(() => {
fn.apply(this, arguments);
pre = Date.now();
})
}
}
}
let num = 1;
let content = document.getElementById('content');
function count() {
content.innerHTML = num++;
};
content.onmousemove = throtte3(count, 1000);
</script>
</body>
</html>