防抖: 延时n秒,只执行最后一次(一次)
1. 事件函数执行,先创建个定时器
2. 把逻辑代码放到定时器中
3. 当函数再次触发,清除定时器
4. 创建一个新定时器即可
代码示例:
<!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>
<input id="input" type="text" placeholder="请输入" />
</body>
</html>
<script>
let input = document.getElementById("input");
let t = null;
input.oninput = function () {
clearTimeout(t);
t = setTimeout(() => {
console.log(input.value);
}, 1000);
};
</script>
执行结果就会,在不在输入时只执行最会一次输入。
防抖的封装
节流:间隔n秒,执行一次(多次)
1. 事件函数执行,先判断有定时器,则直接return
2. 把逻辑代码放到定时器中
3. 定时器执行后,置空定时器变量
4. 下载事件函数执行时,在创建一个新定时器即可
代码示例:
<!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>
<style>
body {
height: 2000px;
}
</style>
</head>
<body></body>
</html>
<script>
// 节流
let flag = true;
window.onscroll = function () {
if (flag) {
setTimeout(() => {
console.log("hello world");
flag = true;
}, 1000);
}
flag = false;
};
</script>
我们定义了一个body设置了高度,在滚动时执行节流。
节流的封装