js中的防抖和节流
1、防抖
1.1 什么是防抖
简单来说就是一个事件被频繁触发，但是不希望它一直做某种操作，而只是在我完成这个事件的时候才做这样一个操作。也就是说在我快速的触发事件的时候，我的下一次事件触发会取消上一次的事件
1.2 应用场景
1、搜索输入框，每输入一次实时的出现一个菜单，用户希望输入完了值之后才有菜单，不希望每输入一个字母就有一个菜单
1.3 代码展示
如下代码需求：
1、当我在500秒以内输入值算作没有输入完成
2、没有输入完成的话不能在控制台打印
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>防抖操作</title>
</head>
<body>
<input id="test" />
</body>
<script>
window.onload = function() {
let test = document.getElementById("test")
let timer = null
function throttle() {
clearTimeout(timer)
timer = setTimeout(function() {
yewu()
},500)
}
test.onkeydown = function(ev) {
throttle()
}
function yewu() {
console.log(test.value)
}
}
</script>
</html>
2、节流
2.1 什么是节流
节流就是在某一段时间内，只执行一次操作，节省资源
2.2应用场景
1、懒加载计算滚动条的位置，不必每次都要去计算
2、疯狂触发某个事件时，某个间隔中，只运行一次
2.3代码实现
需求：
1、鼠标移动的时候，方块也移动
2、减少鼠标移动时，事件的执行次数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>节流操作</title>
<style>
#test {
width: 100px;
height: 100px;
background-color: #FF0000;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
<script>
let test = document.getElementById("test")
let timer = null
document.onmousemove = function(ev) {
if(timer) return
timer = setTimeout(function() {
moveTest(ev.pageX,ev.pageY)
timer = null
},200)
}
function moveTest(X,Y) {
console.log("111")
test.style.transform = "translate("+X+"px,"+Y+"px)"
}
</script>
</html>
3、防抖和节流的区别
1、防抖只执行最后一次操作。
2、节流是在某一段时间内只执行一次操作，这个操作往往是第一次。