js延时器|极客笔记

js延时器

在编写JavaScript代码时，延时器是一种非常常用的技术。它可以用来在一定时间后执行特定的代码，或者在一定时间间隔内重复执行代码。在这篇文章中，我们将详细介绍JavaScript中的延时器，包括setTimeout和setInterval两种常用的延时器的用法和区别。

setTimeout

setTimeout函数可以用来在一定时间后执行一段代码。它接受两个参数，第一个参数是要执行的代码，通常是一个函数；第二个参数是延迟的时间，单位是毫秒。

语法

setTimeout(function, milliseconds);

示例

function greet() {
  console.log("Hello, world!");
}

setTimeout(greet, 2000);

在这个示例中，我们定义了一个名为greet的函数，然后调用setTimeout函数，在2秒之后执行greet函数。在控制台打印出”Hello, world!”。

setInterval

setInterval函数和setTimeout函数类似，也可以用来执行一段代码，不同的是setInterval会在每个一定的时间间隔内重复执行代码。

语法

setInterval(function, milliseconds);

示例

function printTime() {
  let date = new Date();
  console.log(date);
}

setInterval(printTime, 1000);

在这个示例中，我们定义了一个名为printTime的函数，然后调用setInterval函数，每隔1秒就会打印出当前的时间。

clearTimeout和clearInterval

在使用setTimeout和setInterval时，我们有时候会需要取消已经设置的延时器。我们可以使用clearTimeout函数取消setTimeout设置的延时器，使用clearInterval函数取消setInterval设置的延时器。

示例

let timeoutId = setTimeout(function() {
  console.log("This message will not be printed.");
}, 2000);

clearTimeout(timeoutId);

在这个示例中，我们调用setTimeout设置了一个延时器，并将返回的timeoutId保存下来。然后立即调用clearTimeout取消了这个延时器，因此不会打印出”This message will not be printed.”。

使用延时器实现动画效果

延时器还可以用来实现简单的动画效果。我们可以通过在一定时间间隔内改变元素的位置或样式来实现动画效果。

示例

<!DOCTYPE html>
<html>
<head>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
  }
</style>
</head>
<body>

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

<script>
let box = document.getElementById("box");
let position = 0;
let intervalId = setInterval(function() {
  position += 10;
  box.style.left = position + "px";
  if (position >= 300) {
    clearInterval(intervalId);
  }
}, 100);
</script>

</body>
</html>

在这个示例中，我们定义了一个id为box的div元素，然后通过JavaScript代码获取这个元素，并使用setInterval函数在每100毫秒内改变元素的left属性，实现动画效果。当元素的left属性达到300时，调用clearInterval函数取消了这个延时器，动画停止。