分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

JS中的setTimeout()函数

发布时间:2023-09-06 02:34责任编辑:董明明关键词:暂无标签

1、setTimeout() 方法

setTimeout() 方法用于在指定的毫秒数后调用函数或执行表达式。返回一个 ID(数字),可以将这个ID传递给 clearTimeout() 来取消执行。

setTimeout(code, milliseconds, param1, param2, ...)setTimeout(function, milliseconds, param1, param2, ...)  //code|function:必需。要调用一个代码串,也可以是一个函数。 ??第三个及之后的参数:可选,传给setTimeout函数里面的函数作为他的参数(IE9 及其更早版本不支持第三个及之后的参数)。
setTimeout(function(){ alert("Hello"); }, 3000);  //三秒之后执行函数setTimeout(alertFunc, 3000); ????? //三秒之后调用alertFunc函数function alertFunc() { ???alert("Hello!");}

1.1、使用 clearTimeout() 方法阻止函数的执行

在setTimeout() 里面的函数执行之前可以使用 clearTimeout() 方法阻止 setTimeout() 里面的函数执行。

1.2、setTimeout()  的三个及之后的参数

第三个及之后的参数是setTimeout()函数的可选参数,是作为参数传给 setTimeout() 方法里面的匿名函数或者调用的函数,IE9 及其更早版本不支持第三个及之后的参数。

 //IE9 及其更早版本不支持第三个及之后的参数var alertFunc = function(a,b){console.log(a,b)};setTimeout(alertFunc, 2000, "Runoob", "Google");//另外一种写法达到同样目的setTimeout(function(){ alertFunc("Runoob", "Google"); }, 2000);

2、当settimeout()的时间参数为0时

setTimeout(function(){ console.log(1);}, 0);console.log(2);console.log(3);//输出: 2 3 1

JS 是单线程的,单线程就意味着所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。在JS中同时维护着一个任务队列,上面代码中当执行遇到setTimeout(fn,millisec)时,会把fn这个函数放在任务队列中,当JS引擎线程空闲时并达到millisec指定的时间时,才会把fn放到js引擎线程中执行。

setTimeout()只是将事件插入了"任务队列",必须等到当前代码(执行栈)执行完,主线程才会去执行它指定的回调函数。要是当前代码耗时很长,有可能要等很久,所以并没有办法保证,回调函数一定会在setTimeout()指定的时间执行。

3、解决在循环中setTimeout()函数输出问题

经典问题:

在for循环中使用 var 声明变量是全局变量,当for循环执行完毕,此时的 i 是5。再经过一秒钟后分别调用setTimeout函数,输出的 i 都是全局作用域中的 i ,即5。

for(var i=0; i<5; i++){ ?setTimeout(() => { ???console.log(i); ?}, 1000);}

3.1、使用 let 关键字解决

let 关键字使每一次for循环中都有一个独立作用域中的 i ,互不干扰,所以输出的都是各自作用域中的 i,而不是全局作用域中的 i

for(let i=0; i<5; i++){ ?setTimeout(() => { ???console.log(i); ?}, 1000);}  //输出 0 1 2 3 4

3.2、使用闭包解决

for(var i=0; i<5; i++){ ?(function(j){ ???setTimeout(() => { ?????console.log(j); ???}, 1000) ?})(i)} ???//输出 0 1 2 3 4

4、setTimeout和promise的执行顺序

setTimeout(function () { ?console.log(‘定时器开始啦‘)});new Promise(function (resolve) { ?console.log(‘马上执行for循环啦‘); ?for (var i = 0; i < 10000; i++) { ???i == 99 && resolve(); ?}}).then(function () { ?console.log(‘执行then函数啦‘)});console.log(‘代码执行结束‘);//输出:马上执行for循环啦  代码执行结束  执行then函数啦  定时器开始啦

JS中的setTimeout()函数

原文地址:https://www.cnblogs.com/wenxuehai/p/10474359.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved