JavaScript 中的定时器与动画基础

原创已于 2025-04-12 11:00:33 修改 · 481 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2024-10-20 20:05:32 首次发布

setInterval 和 setTimeout 都是 JavaScript 中的定时器函数，用于在一定的时间间隔后执行函数。

setInterval 函数用于按照指定的时间间隔重复执行一个函数。它接受两个参数，第一个参数是要执行的函数，第二个参数是时间间隔的毫秒数。使用示例：

setInterval(function() {
  console.log("Hello World");
}, 1000);

上述示例代码会每隔一秒钟打印一次 "Hello World"。

setTimeout 函数用于延迟一定的时间后执行一个函数。它也接受两个参数，第一个参数是要执行的函数，第二个参数是延迟的毫秒数。使用示例：

setTimeout(function() {
  console.log("Hello World");
}, 2000);

上述示例代码会延迟两秒后打印一次 "Hello World"。

对于新手来说，可以利用 setInterval 和 setTimeout 来制作简单的动画效果。例如，可以使用 setInterval 来每隔一定的时间改变一个元素的位置，从而实现移动效果。可以使用 setTimeout 来在一定的时间后显示或隐藏一个元素，从而实现淡入淡出的效果。

以下是一个简单的示例，展示如何使用 setInterval 和 setTimeout 制作一个简单的淡入淡出动画效果：

HTML:

<div id="box"></div>

CSS:

#box {
  width: 100px;
  height: 100px;
  background-color: red;
  opacity: 0;
  transition: opacity 1s;
}

JavaScript:

var box = document.getElementById("box");

function fadeIn() {
  var opacity = parseFloat(box.style.opacity);
  if (opacity < 1) {
    opacity += 0.1;
    box.style.opacity = opacity;
    setTimeout(fadeIn, 100);
  }
}

function fadeOut() {
  var opacity = parseFloat(box.style.opacity);
  if (opacity > 0) {
    opacity -= 0.1;
    box.style.opacity = opacity;
    setTimeout(fadeOut, 100);
  }
}

function startAnimation() {
  setTimeout(function() {
    fadeIn();
    setTimeout(function() {
      fadeOut();
    }, 2000);
  }, 2000);
}

startAnimation();

上述示例代码会先延迟两秒后开始淡入动画，然后再延迟两秒后开始淡出动画，从而实现一个简单的淡入淡出动画效果。