全栈之路-前端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的主要内容,如果未能解决你的问题,请参考以下文章