????????在使用JS动画做一些练习的时候我发现在动画执行时间内快速移开鼠标时会出现动画因鼠标移动过快从而导致代码冲突让画面抖动的bug ，今天我们就来解决这个bug。
示例：
可以看到当鼠标慢慢移动时，动画正常执行出现和退回，但当在动画执行过程中快速移动鼠标后，画面会出现抖动的bug。
以下是效果图源代码：
<!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>
* {
margin: 0;
padding: 0;
}
.boxx {
position: absolute;
top: 400px;
left: -200px;
width: 220px;
height: 300px;
}
.one {
position: absolute;
width: 20px;
background-color: yellow;
text-align: center;
top: 100px;
left: 200px;
cursor: pointer;
}
.box {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="boxx">
<div class="one">分享到</div>
<div class="box"></div>
</div>
<script>
var boxx = document.querySelector('.boxx');
var one = document.querySelector('.one');
var box = document.querySelector('.box');
var flag = true;
function animate(obj, target, callback) {
obj.timer = setInterval(function() {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
if (callback) {
callback();
}
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 10)
};
one.addEventListener('mouseenter', function() {
animate(boxx, 0);
});
boxx.addEventListener('mouseleave', function() {
animate(boxx, -200);
});
</script>
</body>
</html>对于这个问题我们可以用节流阀来解决 ，节流阀本是在轮播图中防止图片移动过快而使用的，核心思路是利用回调函数，添加一个变量来控制，锁住函数和解锁函数，在动画中也可以用来防止抖动。
?开始设置一个变量var flag = true；
????????if（flag）{falg = fasle；do something} 关闭水龙头
????????利用回调函数 动画执行完毕，flag = true 打开水龙头
接下来我们就利用节流阀来更改最后两段代码让动画不再抖动：
<!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>
* {
margin: 0;
padding: 0;
}
.boxx {
position: absolute;
top: 400px;
left: -200px;
width: 220px;
height: 300px;
}
.one {
position: absolute;
width: 20px;
background-color: yellow;
text-align: center;
top: 100px;
left: 200px;
cursor: pointer;
}
.box {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="boxx">
<div class="one">分享到</div>
<div class="box"></div>
</div>
<script>
var boxx = document.querySelector('.boxx');
var one = document.querySelector('.one');
var box = document.querySelector('.box');
var flag = true;
function animate(obj, target, callback) {
obj.timer = setInterval(function() {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
if (callback) {
callback();
}
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 10)
};
one.addEventListener('mouseenter', function() {
//节流阀
if (flag) {
flag = false;
animate(boxx, 0, function() {
flag = true;
});
};
});
boxx.addEventListener('mouseleave', function() {
//节流阀
if (flag) {
flag = false;
animate(boxx, -200, function() {
flag = true;
});
};
});
</script>
</body>
</html>效果如图：
可以看到即使在动画执行过程中快速移动鼠标动画也不会再抖动了，解决了这个bug。
总结
觉得有帮助的动动小手点个赞再走吧~~