【JavaWeb新手入门】入门篇之JS定时器

原创于 2025-05-07 18:18:18 发布 · 346 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

Javaweb-前端视图篇专栏收录该内容

56 篇文章

订阅专栏

定时器之`setTimeout()`

JavaScript 提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务

setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

var timerId = setTimeout(func|code, delay);

setTimeout函数接受两个参数，第一个参数func|code是将要推迟执行的函数名或者一段代码，第二个参数delay是推迟执行的毫秒数

setTimeout(function(){
    console.log("定时器")
},1000)

温馨提示

还有一个需要注意的地方，如果回调函数是对象的方法，那么setTimeout使得方法内部的this关键字指向全局环境，而不是定义时所在的那个对象

var name = "sxt";
var user = {
    name: "itbaizhan",
    getName: function () {
        setTimeout(function(){
            console.log(this.name);
        },1000)
    }
};
user.getName();

解决方案

var name = "sxt";
var user = {
    name: "itbaizhan",
    getName: function () {
        var that = this;
        setTimeout(function(){
            console.log(that.name);
        },1000)
    }
};
user.getName();

定时器可以进行取消

var id = setTimeout(f, 1000);
clearTimeout(id);

实时效果反馈

1. 以下是关于定时器setTimeout代码，运行结果是：

var name = "sxt";
var user = {
    name: "itbaizhan",
    getName: function () {
        var that = this;
        setTimeout(function(){
            console.log(that.name);
        },1000)
    }
};
user.getName();

A itbaizhan

B sxt

C 报错

D undefined

答案

1=>A

定时器之`setInterval()`

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

setInterval函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行

var timer = setInterval(function() {
  console.log(2);
}, 1000)

通过setInterval方法实现网页动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		#someDiv{
			width: 100px;
			height: 100px;
			background: red;
		}
	</style>
</head>
<body>
	<div id="someDiv"></div>
	<script>
		var div = document.getElementById('someDiv');
		var opacity = 1;
		var fader = setInterval(function() {
		  opacity -= 0.05;
		  if (opacity > 0) {
		    div.style.opacity = opacity;
		  } else {
		    clearInterval(fader);
		  }
		}, 30);

	</script>
</body>
</html>

定时器可以进行取消

var id = setInterval(f, 1000);
clearInterval(id);

实时效果反馈

1. 以下是关于定时器setInterval代码，每秒打印当前时间，横线处填写代码是：

___(function(){
    console.log(new Date().toLocaleTimeString());
},1000)

A getTime

B setTimeout

C setInterval

D function

答案

1=>C

【JavaWeb新手入门】入门篇之JS定时器

定时器之setTimeout()

定时器之setInterval()

定时器之`setTimeout()`

定时器之`setInterval()`