同名函数加载及定时器清除问题

最新推荐文章于 2023-01-16 21:40:09 发布

qq_34481114

最新推荐文章于 2023-01-16 21:40:09 发布

阅读量428

点赞数

分类专栏： JavaScript 文章标签：定时器 javascript 函数

本文链接：https://blog.csdn.net/qq_34481114/article/details/65935823

版权

JavaScript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            padding:0;
            margin:0px;
            position: relative;
        }
        .box{
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            left:0;
        }
    </style>
</head>
<body>
<button>
    开始
</button>
<div class="father">
    <div class="box">
</div>
</div>
<script>
    var bx = document.getElementsByClassName("box")[0];
    var bt= document.getElementsByTagName("button")[0];

    bt.onclick =function () {
        animate(bx,400);
  
        animate(bx,200);
    }


    //要用定时器先清定时器
    function animate(ele,target) {

        clearInterval(ele.timer);
        var step=target>ele.offsetLeft?10:-10;
        ele.timer=setInterval(function () {
         
            ele.style.left=ele.offsetLeft+step+"px";
            var delta=target-ele.offsetLeft;
            if(Math.abs(delta)<=Math.abs(step)){
                ele.style.left=target+"px";
                clearInterval(ele.timer);
            }
        },30)
    }
    
</script>
</body>
</html>

在执行上图代码的过程中,我会以为按钮按下触发onclick事件时,执行animate函数, box会先运动到400px处,再运行到200px处,然而理想很丰满.现实很骨感, box直接运行到200px.我就神奇的纳闷了.一开始怀疑animate(bx,400);这个函数没执行,所以我做了下面的测试

    function animate(ele,target) {
        console.log("hello");
        clearInterval(ele.timer);
        var step=target>ele.offsetLeft?10:-10;
        ele.timer=setInterval(function () {
            ele.style.left=ele.offsetLeft+step+"px";
            var delta=target-ele.offsetLeft;
            if(Math.abs(delta)<=Math.abs(step)){
                ele.style.left=target+"px";
                clearInterval(ele.timer);
            }
        },30)
    }

发现"hello"确实执行了两次,可是为什么和预期不一样呢?至少box没有移动到400px,那么我就找到代码中让box运动的地方. ele.timer=setInterval(); 对,这个定时器.就是让box不停的运动.为了验证这里面有没有被执行,我做了下面的测试

    function animate(ele,target) {
        clearInterval(ele.timer);
        var step=target>ele.offsetLeft?10:-10;
        ele.timer=setInterval(function () {
            console.log("hello"+target);
            ele.style.left=ele.offsetLeft+step+"px";
            var delta=target-ele.offsetLeft;
            if(Math.abs(delta)<=Math.abs(step)){
                ele.style.left=target+"px";
                clearInterval(ele.timer);
            }
        },30)
    }

结果控制台仅仅输出了 "hello200", 看来确实是定时器只执行了运动到200px. 可是为什么会这样呢? 原理是程序在执行的时候确实会执行animate(bx,400); animate(bx,200)这两个函数,可是在执行animate(bx,400) 时候,先给box清除定时器再给box设置了一个定时器,这时候程序不会首先执行整个定时器里面额内容,会继续向下加载animate(bx,200),这个函数

会清除box上面设置的定时器,设置自己运动到200px的定时器.所以就能很好地与我们的问题想吻合了..

qq_34481114

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
同名函数加载及定时器清除问题

Title .father{ padding:0; margin:0px; position: relative; } .box{ width: 50px; height: 50px; backgr
复制链接

扫一扫