JavaScript基础进阶——定时器设置动画效果

最新推荐文章于 2024-05-29 19:02:09 发布

原创最新推荐文章于 2024-05-29 19:02:09 发布 · 762 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

API 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了JavaScript中的定时器基础，包括如何使用setTimeout和clearTimeout来创建和停止定时器。重点讲解了如何通过定时器实现盒子的动画效果，涉及设置定位、设定步长、缓动动画、边界判断以及回调函数的应用。在动画过程中，当盒子移动到目标位置时，会自动清除定时器并可执行回调函数。

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

定时器是什么？

setTimeout（调用函数，[延迟时间（毫秒）]）设置定时器时间默认为0

怎样停止定时器？

清除定时器 clearInterval(TImerId)

也可以让定时器暂停 clearTimeout

设置动画效果——让盒子动起来

核心算法：让盒子的当前位置加一个固定或者变化的步长值

步骤：

1、给盒子添加定位让盒子可以设置left值

2、给盒子绑定定时器

3、设置步长值变化的步长值为缓动动画

4、ceil 向上取整 floor 四舍五入

5、当移动距离达到 target值时停止移动清除定时器

6、形参中设置了 callback 函数当停止移动时需要判断是否有回调函数需要执行

// 封装动画函数 将回调函数作为封装函数的一个形参进行传递
function animate(obj,target,callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        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();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}

注意：left值必须要加 ’px‘ 不然不起作用