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

Posted 涂宗勋

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了全栈之路-前端javascript基础知识6相关的知识,希望对你有一定的参考价值。

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

以上是关于全栈之路-前端javascript基础知识6的主要内容,如果未能解决你的问题,请参考以下文章

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

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

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

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

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

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