前端 —— JavaScript 基础篇 20 --- 定时器 setTimeout、setInterval、clearTimeout、clearInterval

最新推荐文章于 2025-06-06 16:04:41 发布

原创最新推荐文章于 2025-06-06 16:04:41 发布 · 333 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

JavaScript 专栏收录该内容

52 篇文章

订阅专栏

本文详细介绍了JavaScript中的定时器函数setTimeout和setInterval，包括它们的使用方法、参数传递、常见实例以及如何使用clearTimeout和clearInterval进行清除。通过示例解释了为何在设置定时器时不能直接调用带参数的函数，强调了定时器在前端开发中的重要性。

上一篇提到了BOM对象即window对象今天总结下window的另一个对象：定时器

setTimeout(); 定时器

延迟执行，并且执行一次

参数1：函数———要执行的逻辑
参数2：时间——单位是毫秒，表示间隔多长时间执行参数1 1000毫秒 = 1秒

语法：

window.setTimeout(function () {
// 函数体
},1000)；

省略 window的写法
setTimeout(function () {
// 函数体
},1000)；

小例子：2秒后控制台输出

setTimeout(function () {
	console.log('定时炸弹')
},2000);

可以封装成一个方法，方便后期随时用定时器调用

function times(){
	console.log('3秒后调用该函数，直接调用函数名times。不能写成times(),这样是调用函数的返回值（就是直接调用了函数执行的结果）')
}

setTimeout(times,3000);

定时器调用封装的方法时：直接调用函数名字不带小括号 setTimeout( fn , 毫秒 ); 1秒后执行 fn 的函数体。调用函数体，在定时器内执行

不能写成：setTimeout( fn() ,1000); 写成 fn() 那调用的是函数的返回值，就是函数执行的结果，该函数没有return返回值就是undefined，相当于undefied,1000，那么该定时器就不起作用

带参数 的定时器：

//执行带参数的函数体
function fn02(i){
	console.log(i);
}
setTimeout(function(){
	fn02(10);//在函数体内部调用另一个函数并传参，这样就可以在使用定时器时并传参了。
},1000)

【 实例 1 】：5秒后关闭广告图片

<img src="../images/timg02.jpg" width="500" height="500">

var img = document.querySelector('img');
setTimeout(function(){
	img.style.display = 'none';
},5000)

clearTimeout(); 清除定时器

语法：

clearTimeout(function(){

},毫秒数);

【 实例 2 】：关闭图片02的定时器

//html
<img src="../images/timg.jpg" width="300" height="200" class="img02">
<button>关闭图片02的定时器</button>

//js
var img02 = document.querySelector('.img02');
	var btn = document.querySelector('button');
	var timer = setTimeout(function(){
	img02.style.display = 'none';
},4000);

btn.onclick = function(){
	clearTimeout(timer);
}

setInterval(); 定时器

每隔一段时间就执行一次，重复的执行

语法：
       setInterval(function(){
           //函数体
       },毫秒)

clearInterval()；清除定时器

语法:
setInterval(定时器名)

var timer02;
function beginTimer02(){
	timer02 = setInterval(function(){
	    console.log('setInterval()，定时器，每隔一段时间执行一次');
	},1000);
}

//关闭计时器
function closeTimer02() {
	clearInterval(timer02)
}

我的文章都是学习过程中的总结，如果发现错误，欢迎留言指出，我及时更正。