js动画透明度Debug

Posted 2021-06-20 贪吃ღ大魔王

项目场景：

js动画透明度

问题描述：

鼠标移动box区opacity向1渐变正常，鼠标移出box区发生闪烁现象。

当鼠标移入时，正常：

当鼠标移出时，闪烁bug：

以下是bug源码：

js:

  var box = document.querySelector('div');
            var timer;
            var timers;
            var num = 0.3;
            var num1 = 1;
            box.onmouseover = () => {
                clearInterval(timer);
                timer = setInterval(() => {
                    num += 0.1;
                    box.style.opacity = num;
                    if (num == 1) {
                        clearInterval(timer);
                    }
                }, 100)
            }
            box.onmouseout = () => {
                clearInterval(timers);
                timers = setInterval(() => {
                    num1 -= 0.1;
                    box.style.opacity = num1;
                    if (num1 == 0.3) {
                        clearInterval(timers);
                    }
                }, 100)
            }

css:

* {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            background: deeppink;
            position: absolute;
            left: 200px;
            top: 200px;
            opacity: .3;
        }

---

原因分析：

可能终止条件的设置有问题，以至于定时器不能清除。

---

解决方案：

从bug图推测出，可能时终止条件的问题，先查看源码时怎样的：

 box.onmouseover = () => {
                clearInterval(timer);
                timer = setInterval(() => {
                    num += 0.1;
                    box.style.opacity = num;
                    if (num == 1) {
                        clearInterval(timer);
                    }
                }, 100)
            }
            box.onmouseout = () => {
                clearInterval(timers);
                timers = setInterval(() => {
                    num1 -= 0.1;
                    box.style.opacity = num1;
                    if (num1 == 0.3) {
                        clearInterval(timers);
                    }
                }, 100)
            }

发现好像并没有什么不妥，
接下来，既然肉眼看不出什么问题，这时我们直接打印num 和 设置它 box.style.opacity的值时多少。

这里，看到打印的num值 就找到了判断条件的问题所在，

这里的 num 是不可能等于1的。

---

解决办法：规避使用小数

            var box = document.querySelector('div');
            var timer;
            var timers;
            box.onmouseover = () => {
                var num = 30;
                timer = setInterval(() => {
                    num += 10;
                    box.style.opacity = num / 100;
                    if (num == 100) {
                        clearInterval(timer);
                    }
                }, 100)
            }
            box.onmouseout = () => {
                clearInterval(timers)
                var num1 = 100;
                timers = setInterval(() => {
                    num1 -= 10;
                    box.style.opacity = num1 / 100;
                    if (num1 == 30) {
                        clearInterval(timers);
                    }
                }, 100)
            }