JS动画定时器知识总结

2023年6月10日下午10:37 • JavaScript

标题：JS动画定时器知识总结

正文：

1. 前言

在前端开发中，动画交互是一个很重要的部分。JS定时器作为动画交互的实现方式之一，在使用过程中存在着一些需要注意的点。本文将针对JS动画定时器进行一个总结，希望能对读者在动画交互的应用中提供一些帮助。

2. 定时器概念

在JavaScript中，有两种定时器：setInterval()和setTimeout()。二者的作用都是执行一个函数或者一段代码，在一段时间之后，触发定时器所关联的函数或代码的执行。

setInterval()函数会按照指定的时间间隔反复执行一次，直到 clearInterval() 被调用或窗口被关闭。

setTimeout()函数会延迟一定时间后执行一次函数或一段代码，执行完成后就不再触发，可以使用 clearTimeout() 终止其执行。

3. 定时器注意事项

定时器的执行时间不是准确的时间，而是大约在指定时间后执行。
定时器会一直循环执行，除非手动调用 clearInterval()或 clearTimeout()终止其执行。
多个定时器可以同时执行，但是使用过多会导致页面性能下降。

4. 定时器应用示例

下面通过两个示例，演示定时器的具体应用。

4.1 延迟加载图片

在页面滚动的过程中，对于非常大的图片，为了避免页面一次性加载造成性能的下降，可以通过设置定时器，逐步加载大图，避免一次性加载，减轻页面的压力。

示例代码：

const images = document.querySelectorAll('.large-image');
for (let i = 0; i < images.length; i++) {
  if (images[i].getBoundingClientRect().top < window.innerHeight) {
    images[i].src = images[i].getAttribute('data-src');
  }
}

window.addEventListener('scroll', function(){
  for (let i = 0; i < images.length; i++) {
    if (images[i].src !== images[i].getAttribute('data-src') && images[i].getBoundingClientRect().top < window.innerHeight) {
      setTimeout(function() {
        images[i].src = images[i].getAttribute('data-src');
      }, 1000 * i);
    }
  }
});

代码中，我们首先通过 querySelectorAll() 获取到所有需要延迟加载的图片，然后在页面滚动事件中监听每个图片的位置，一旦图片进入可视区域，就立即加载，否则就通过设置定时器逐步加载大图。

4.2 动画效果

定时器的另一个应用场景便是动画效果的实现。通过循环设置定时器，让DOM元素在一段时间里发生位置、大小等变化。

示例代码：

const box = document.querySelector('.animated-box');
let x = 0;

function animate() {
  x++;
  box.style.transform = `translateX(${x}px)`;
  if (x < 200) {
    setTimeout(animate, 10);
  }
}

animate();

在这个示例中，我们定义一个 animate() 函数，在函数中循环设置定时器，让DOM元素在 x 坐标上移动。最终实现一个简单的动画效果。