setinterval(javaScript中setTimeout和setInterval的区别)
更新时间:2022-10-11 05:22:35Javascript不仅可以允许我们马上执行一个function,我们也可以实现在一个指定的时间以后来调用function。后者称之为“scheduling call”。
有两个主要的方法可以实现:
- setTimeout:过一段时间以后调用某个function
- setInterval:重复不断的执行某个function,一段时间以后开始调用,然后按照一定的间隔重复不断的调用。
setTimeout
setTimeout的语法如下:
let timerId = setTimeout(func | code, [delay], [arg1], [arg2], ...)
它有以下的参数:
- func|code: 一个字符串或一个待调用的function代码。按规则讲,它应该是一个function, 代码string也可以传进来,但不建议。
- delay:function执行之前的delay等待时间,默认为0毫秒。
- arg1,arg2,...:是要调用的function的参数(IE9不支持)。
举例,以下的代码在1秒后调用welcom()的function.
function welcome() {
console.log('欢迎访问www.ilaoxu老许编程');
}
setTimeout(welcome, 1000);
带参数的例子:
function welcome(message, siteName) {
console.log(message ' to ' siteName);
}
setTimeout(welcome, 1000, "欢迎您访问", "www.ilaoxu老许学编程");
在第一个参数为字符串的情形下,这样使用(双引号和单引号的组合使用):
setTimeout("console.log('欢迎访问www.ilaoxu老许编程')", 1000);
但是,推荐用法是使用arrow function。
setTimeout(() => console.log('欢迎访问www.ilaoxu老许编程'), 1000);
推荐用法是传递一个function进去,但不要去执行它。在function后面添加一个括号不是好主意。
//错误用法
setTimeout(welcome(), 1000);
用clearTimeout取消
setTimeout返回一个“计时器的标记” tiemId,用来取消cancel这个调用。下面的例子为语法示例:
let timeoutId = setTimeout(...);
clearTimeout(timeoutId);
下面的例子演示了设置一个定时调用,然后取消它:
let timeoutId = setTimeout(() => console.log("Hello, dear user!"), 2000);
console.log(timeoutId); // 计时器标记
clearTimeout(timeoutId);
console.log(timeoutId); // 同样的计时器标记 (取消以后不会变为null)
setInterval
setinterval语法示例:
let timerId = setInterval(func | code, [delay], [arg1], [arg2], ...)
参数的意思跟setTimeout一致,不同的是调用以后会持续重复的调用。
使用clearInterval(timerId)来停止将要发生的调用。
看一个例子
// 2秒钟重复一次
let intervalTimerId = setInterval(() => console.log('开始'), 2000);
// 5秒后结束重复
setTimeout(() => {
clearInterval(intervalTimerId);
console.log('停止');
}, 5000);
嵌套的setTimeout
重复执行某个动作,我们可以有两种方法,一种是使用setInterval,另一种是使用setTimeout,举例如下:
/** 与其使用:
let intervalTimerId = setInterval(() => console.log('开始'), 1000);
*/
let intervalTimerId = setTimeout(function start() {
console.log('开始');
intervalTimerId = setTimeout(start, 1000); // (*)
}, 1000);
在当前的setTimeout中使用另一个setTimeout预定了下一次的调用。
嵌套的setTimeout更灵活一些。比如,你要写一个程序Meizu5秒钟向后台服务器调用数据,如果服务器繁忙,间隔时间就翻倍。
let delay = 3000;
let intervalTimerId = setTimeout(function request() {
//发送请求
if (如果服务器出错,请求失败) {
delay *= 2;
}
intervalTimerId = setTimeout(request, delay);
}, delay);
可以理解为setTimeout在两次调用之间比setInterval更精确。
我们看一个对比的代码:第一个使用setInterval
let i = 1;
setInterval(function () {
f(i );
}, 100);
第二个使用setTimeout
let i = 1;
setTimeout(function run() {
f(i );
setTimeout(run, 100);
}, 100)
对于setInterval,它每隔100毫秒调用一次f(i ). 在两次f调用之间的间隔会比代码中的时间要短。
第二个例子中setTimeout,嵌套的setTimeout确保了每两次调用之间的时间间隔,因为它是在上一次调用之后预定新的调用的。
Zero延时 setTimeout
有一个特殊的调用例子就是在当前代码之后立即调用setTimeout,没有时间间隔。
setTimeout(() => console.log("www.ilaoxu"));
console.log("欢迎访问老许编程");
浏览器端对多久运行一次嵌套setTimeout有限制,HTML5标准规定,在4次嵌套timer后,时间间隔至少要4ms。
服务器端的javascript没有限制。经常会有立即调用异步任务的情况。
订阅最新文章 老许学编程一个有大纲的学习平台
- 最新资讯
-
- 2022-11-18 电竞宣萱(“吃鸡”呆萌和书生组合果然是无敌,真的是钢枪组合,所向无敌)
- 2022-11-15 实况足球曼联时刻测评(实况足球:曼联传奇——吉格斯测评)
- 2022-11-15 迭戈-科斯塔将在今夏离开马竞(官方:马竞宣布与迭戈-科斯塔解约)
- 2022-11-15 皮克就是罚款大户(皮克狂炸了赛场公开出言讽刺西甲主席 大嘴或被追加停赛)
- 2022-11-15 lol官网(10年前的LOL官网:只有40名英雄,那时候盖伦都还没上线)
- 2022-11-15 巴西对秘鲁角球数(巴西8强战存一大隐患!主力后腰累积黄牌停赛,后防将经受考验)
- 2022-11-15 张效瑞沈祥福能给深足提供帮助(张效瑞确认沈祥福出任深足教练组组长:训练和临场指挥均由他负责)
- 2022-11-15 葡萄牙vs乌拉圭首发(出战世界杯稳了!孙准浩替补踢半场长传成功率高 一优势有望获重用)
- 2022-11-15 湖人vs步行者全场回放2020(詹姆斯暴砍39分,湖人队加时124-116击败步行者)
- 2022-11-15 尤文逼和国际米兰(欧洲足坛疯狂一夜:阿森纳巴黎全胜,尤文2-0国米,曼联爆冷输球)
- 推荐攻略
-
-
乌克兰总统身亡(乌总统泽连斯基解除乌总检察长及国家安全局局长职务)
-
足球比赛每个半场多少分钟(足球比赛每半场几分钟)
-
2021中超今天哪里转播(今晚!中超2场对决,CCTV5 直播申花PK武汉,腾讯体育亚泰vs天津)
-
2022梅西坠机身亡事件结果(足坛变天!巴萨无缘榜首的2年:梅西告别,老马去世,2-8惨案)
-
2021全运会篮球直播赛程辽宁(4月22日央视直播:CBA总决赛;赵心童vs马奎尔,塞尔比vs颜丙涛)
-
中国最强导弹(世界洲际导弹前10排名,中国东风导弹领先美国,第一名堪称导弹王)
-
2021篮球比赛在哪里看(CCTV5直播NBA 辽篮争夺CBA总决赛冠军点 颜丙涛出战斯诺克世锦赛)
-
东航结果不敢公布了(民航局再次回应东航MU5735事故调查!查明原因有多难,多久公布?)
-