JS定时器先清除在设置的原因解析

最新推荐文章于 2024-06-30 19:59:20 发布

犹如幻翳！

最新推荐文章于 2024-06-30 19:59:20 发布

阅读量2.3k

点赞数 2

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/zw686668/article/details/107725210

版权

javascript 专栏收录该内容

8 篇文章

订阅专栏

本文探讨了在DOM操作中实现动画效果时，如何通过合理管理定时器避免资源浪费。重点介绍了在事件触发动画时，先清除现有定时器再设置新定时器的策略，确保每次动画只运行一个定时器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做一个domobj动态效果的时候，事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器，所以每生成一次事件需要清除一次定时器，达到始终保持事件里只有一个定时器。

参考代码两个定时器的作用：

注意：此时就是先清除定时器，原因是是再次点击产生事件的时候第一个事件没有运行结束，会接着产生第二个定时器，作用是把上一次的定时器清除，因为一个事件里只能有一个定时器。
注意：此时定时器的作用是当设置的定时器在一个事件里执行完毕时清除的作用。

此时还有一个需要注意的点可能会有人会问，为什么第一个定时器没有用var timer来定义变量，却直接可以清除objdom.timer.

答：clearInterval(domobj.timer)是一个清除定时器，domobj此时是一个自定义属性，此时不需要用var来声明变量。

还有一个点是打印清除定时器的值为undefined,也说明了domobj.timer被声明了，但是没有被定义，只有当一个事件里产生多个定时器，该变量才会被赋值。（undefined,1,2…）前面说过，一个事件里最好保持一个定时器，所以需要开头进行清除。

 <script>
        var odiv = document.querySelector('div')
        odiv.onclick = function () {
            StartMove(odiv, {
                width: 800,
                height: 800,
                opacity:100,
            })
        }
        function StartMove(domobj, json) {
        	//注意：此时就是先清除定时器，原因是是再次点击产生事件的时候第一个事件没有运行结束，会接着产生第二个定时器，作用是把上一次	  的定时器清除，因为一个事件里只能有一个定时器
            clearInterval(domobj.timer)
            domobj.timer = setInterval(function () {
                var flag = true;
                for (var attr in json) {
                    var itarget = json[attr];
                    if (attr === 'opacity') {
                        var icur = parseInt(getstyle(domobj, 'opacity') * 100)
                    } else {
                        var icur = parseInt(getstyle(domobj, attr));
                    }
                    var ispeed = (itarget - icur) / 8;
                    ispeed = ispeed > 0 ? ispeed = Math.ceil(ispeed) : ispeed = Math.floor(ispeed);
                    if (attr === 'opacity') {
                        domobj.style.opacity = icur + ispeed
                    } else {
                        domobj.style[attr] = icur + ispeed + 'px';
                    }
                    if (itarget !== icur) {
                        flag = false
                    }
                    if (flag) {
                    //注意；此时定时器的作用是当设置的定时器在一个事件里执行完毕时清除的作用
                        clearInterval(domobj.timer)
                    }
                }
            }, 50)
        }
        function getstyle(domobj, attr) {
            if (window.getComputedStyle) {
                return getComputedStyle(domobj, null)[attr]
            }
            return domobj.currentStyle[sttr];
        }

    </script>