节流策略:顾名思义,可以减少一段时间内事件的触发频率。
就像是游戏发动技能,貂蝉一技能用过之后,没有冷却好的时候要是再点是没有办法触发技能的,而防抖就像回城,可以被打断但是可以重新回城,最后回一次城。节流执行的是触发第一次,而防抖执行的是触发的最后一次。
完整代码:
<!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>
<script src="./lib/jquery.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#ag {
position: absolute;
}
</style>
</head>
<body>
<img src="../angel.gif" alt="" id="ag">
<script>
// 获取小天使元素
var angle = $('#ag');
// 定义一个节流阀
var timer = null;
// 监听鼠标移动事件
$(document).on('mousemove', function(e) {
// 判断是否有节流阀
if (timer) {
return;
}
// 开启延时器
timer = setTimeout(function() {
angle.css('left', e.pageX + 'px').css('top', e.pageY + 'px');
console.log(111);
// 重置timer
timer = null;
}, 16)
});
</script>
</body>
</html>