运用setTimeout 替换 setInterval

最新推荐文章于 2024-08-01 10:34:16 发布

原创最新推荐文章于 2024-08-01 10:34:16 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

Js 同时被 2 个专栏收录

11 篇文章

订阅专栏

javascipt

10 篇文章

订阅专栏

本文介绍了一种利用JavaScript中的setTimeout函数实现元素周期性位置变化的方法。通过递归调用自身，使页面上的一个红色方块从左向右平滑移动，展示了如何设定递归的间隔时间和移动的距离。

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

通用的代码如下，

       setTimeout(function(){
               //do something
               setTimeout(arguments.callee, time);      
        }, time);

具体的代码如下

<!doctype html>
<html>

<head>
    <title>Repeating Timers Example</title>
</head>

<body>
    <div id="myDiv" style="position:absolute;width:100px;height:100px;left:0px;top:10px;background:red;"></div>
    <script type="text/javascript">
    setTimeout(function() {

        var div = document.getElementById("myDiv"),
            left = parseInt(div.style.left) + 5;
        div.style.left = left + "px";

        if (left < 200) {
            setTimeout(arguments.callee, 50);
        }

    }, 50);
    </script>
</body>

</html>