全栈之路-前端javascript基础知识6

Posted 2022-01-21 涂宗勋

1、js中有很多内置函数可以使用，例如setTimeout和clearTimeout，可以延迟执行及清除延迟执行，例如以下代码：

function test1()
	console.log(new Date);
	setTimeout(()=>console.log(new Date),2000);

test1();

上述代码输出结果如下，两次输出结果间隔两秒。

Wed Nov 24 2021 20:36:44 GMT+0800 (中国标准时间)
Wed Nov 24 2021 20:36:46 GMT+0800 (中国标准时间)

延迟执行的设置是可以被清除的，但是只能在到达延迟执行时间之前执行了才生效，例如下边代码就只会输出一次日期

function test2()
	console.log(new Date);
	let id=setTimeout(()=>console.log(new Date),5000);
	clearTimeout(id);

test2();

输出结果如下：

Wed Nov 24 2021 20:38:58 GMT+0800 (中国标准时间)

而下边的代码还是会执行两次日期的打印，代码如下：

function test2()
	console.log(new Date);
	let id=setTimeout(()=>console.log(new Date),5000);
	setTimeout(()=>clearTimeout(id),6000);

test2();

执行结果如下：

Wed Nov 24 2021 20:46:42 GMT+0800 (中国标准时间)
Wed Nov 24 2021 20:46:47 GMT+0800 (中国标准时间)

2、除了延迟执行，还有定时循环执行setInterval和清除函数clearInterval，用法和setTimeout很类似，例如如下代码：

function test3()
	let num = 0;
	let intervalId = null;
	let addNum = function()
		console.log(new Date);
		num++;
		if(num == 5)
			clearInterval(intervalId);
		
	
	intervalId=setInterval(addNum,1000);

test3();

上边代码每隔1秒执行addNum函数，对num自增运算，当num为5时结束循环，输出结果如下：

Wed Nov 24 2021 20:40:04 GMT+0800 (中国标准时间)
Wed Nov 24 2021 20:40:05 GMT+0800 (中国标准时间)
Wed Nov 24 2021 20:40:06 GMT+0800 (中国标准时间)
Wed Nov 24 2021 20:40:07 GMT+0800 (中国标准时间)
Wed Nov 24 2021 20:40:08 GMT+0800 (中国标准时间)

setInterval可以用来定时循环，但是setTimeout其实也可以，例如如下代码：

function test4()
	let num=0;
	let intervalId= null;
	let addNum=function ()
		num++;
		if(num<5)
			setTimeout(addNum,1000);
		
		console.log(new Date);
	
	addNum();

test4();

这里使用的setTimeout，但是效果和setIntervalId基本一样，同时有的地方更加推荐这种用法，输出结果如下：

Wed Nov 24 2021 20:41:16 GMT+0800 (中国标准时间)
Wed Nov 24 2021 20:41:17 GMT+0800 (中国标准时间)
Wed Nov 24 2021 20:41:18 GMT+0800 (中国标准时间)
Wed Nov 24 2021 20:41:19 GMT+0800 (中国标准时间)
Wed Nov 24 2021 20:41:20 GMT+0800 (中国标准时间)

相关代码地址：https://gitee.com/tuzongxun/js-study/blob/master/test5.html