Javascript之间隔函数（Interval）|极客笔记

Javascript之间隔函数（Interval）

什么是间隔函数？

在Javascript中，间隔函数是一种用于定时执行代码的方法。通过间隔函数，可以在特定的时间间隔内重复或延迟执行指定的代码。这在处理需要定时任务的情况下非常有用，例如周期性更新数据、轮播图切换、动画效果等。

setInterval函数

在Javascript中，我们可以使用setInterval函数来创建一个重复执行的间隔函数。

语法

setInterval(函数, 时间间隔)

其中，函数是要重复执行的代码块，时间间隔是重复执行函数的时间间隔，单位是毫秒。

示例

下面是一个简单的示例，每隔1秒钟在控制台打印一次”Hello, World!”：

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

运行结果：

Hello, World!
Hello, World!
Hello, World!
...

clearInterval函数

要停止一个间隔函数的执行，我们可以使用clearInterval函数。

语法

clearInterval(间隔函数ID)

其中，间隔函数ID是要停止执行的间隔函数的ID，它是由setInterval函数返回的。

示例

下面是一个示例，每隔1秒钟在控制台打印一次数字，并在达到10的时候停止执行：

var count = 0;
var intervalId = setInterval(function() {
  console.log(count);
  count++;
  if (count === 10) {
    clearInterval(intervalId);
  }
}, 1000);

运行结果：

使用间隔函数制作动画效果

间隔函数在制作动画效果时非常有用。通过改变元素的样式属性，并使用间隔函数不断更新元素的样式，可以实现平滑的过渡效果或动画效果。

下面是一个简单的示例，在HTML页面中创建一个盒子，点击按钮后，盒子会慢慢从左边移动到右边：

HTML代码：

<div id="box" style="width: 50px; height: 50px; background-color: red; position: absolute; left: 0;"></div>
<button onclick="startAnimation()">开始动画</button>

Javascript代码：

function startAnimation() {
  var box = document.getElementById("box");
  var position = 0;
  var intervalId = setInterval(function() {
    if (position === 200) {
      clearInterval(intervalId);
    } else {
      position++;
      box.style.left = position + "px";
    }
  }, 10);
}

点击”开始动画”按钮后，盒子会平滑地从左侧移动到右侧。